一、基础概念

屏幕分辨率：纵横向上的像素点数，单位是px。

物理分辨率：出厂设置，硬件分辨率，1920*1080

逻辑分辨率：软件/驱动设置，缩放调解的分辨率，1920/150%

制作网页参考逻辑分辨率。

视口：显示HTML网页的区域，用来约束HTML尺寸。

           手机屏幕尺寸不同，网页宽度均为100%（980px）。

网页的宽度和逻辑分辨率尺寸相同。

二、适配方案

         1、宽度适配

                宽度适配，即宽度自适应，又分为百分比布局和flex布局。

        2、等比适配

                等比适配，即宽高等比缩放，又分为rem和vw。

三、rem

         rem单位是相对单位；

        rem单位是相对于html标签的字号的计算结果；

        1rem = 1 html 字号大小。

        目前rem布局方案：是将网页等分成10份，html标签的字号为视口宽度的十分之一（假设：viewport为320，字号大小为32px）。

        rem单位尺寸配置：

                1、确定基准根字号（查看设计稿宽度→确定视口宽度→1/10视口宽度→确定基准根字号 ）

                2、计算rem单位的尺寸，rem=px单位数值/基准根字号

四、vw和vh

        vw单位是相对单位；

        vw单位是相对视口宽度的尺寸计算。

        1 vw = 1 / 100 视口宽度（以视口宽度375为例，1vw是3.75）。

        vh单位是相对单位；

        vh单位是相对视口高度的尺寸计算。

        1 vh = 1 / 100 视口高度（以视口高度667为例，1vh是6.67）。

        vw / vh 布局配置：

                1、查看设计稿宽度→确定参考设备（视口）宽/高→确定vw / vh 尺寸

                2、vw单位 = px 单位数值 / ( 1 / 100 视口宽度)

五、媒体查询

        媒体查询就是通过检测视口的宽度，然后编写差异化的css样式。响应式网页就是利用媒体查询@media构建的。

@media (媒体特性) {
    选择器 {
        css属性
    }
}

注意：max-width：最大宽度，书写时从大到小

           max-min：最小宽度，书写时从小到大 

媒体查询完整写法

// 关键词：and、only、not
@media 关键词 媒体类型 and (媒体特性) {
    css属性
}