阿wing

阿wing | 学习笔记

    响应式设计
    纠错

    自适应网页设计

    Responsive Web Design:指可以自动识别屏幕宽度、并做出相应调整的网页设计。一个自适应布局可以被看作是响应式布局的一个更加廉价的替代品

    响应式网页设计

    指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。

    1. 物理像素（设备像素）分辨率是1920设备像素*1080设备像素

    2. 每英寸像素取值（Pixel per inch，简称PPI）

    3. CSS像素：浏览器里的一切长度都是以CSS像素为单位的。在非高清屏幕以及未缩放浏览器的情况下，一个CSS像素等于一个物理像素；而Retina屏幕（ppi高），一个css像素等于n个物理像素，dppx＝n；可以说dppx可以看作devicePixelRatio（设备像素比，简称DPR）的单位

    4. 视口（viewport）: pc浏览器的width和何height；移动端布局视口（默认的布局视口宽度与浏览器宽度完全独立）

    5. 布局视口尺寸设置width=device-width将布局视口的宽度设置为设备最理想的宽度

    响应式图像

    https://isux.tencent.com/responsive-image.html

    参考资料


    下篇： SEO