适配与视口、分辨率、媒体查询、缩放

浏览器：

移动端浏览器

内置浏览器：就是手机自带的，更新慢，一般是系统更新才可能更新

可以安装的浏览器：更新快

pc端浏览器

像素

css像素: web开发的最小单元， px

物理像素：屏幕显示的最小颗粒，真实存在的点；

屏幕分辨率：也就是横纵向上的像素点的个数，一般以纵向像素*横向像素

1个css像素1px不一定等于1个物理像素

屏幕尺寸：手机的对角线长度，1英寸=2.54cm

设备独立像素：浏览器中看到的移动设备 像素，是设备提供，用来对接css像素的接口

位图像素：一个栅格图像（png,jpg……）的最小单元；一个位图像素对应一个物理像素，图片才能清晰展示，图片呈现的最小单元

像素比：设备物理像素与设备独立像素的比例（一个方向上占满整个屏幕所需的物理像素的个数/一个方向上占满整个屏幕所需的设备独立像素的个数）简单地理解就是1px所能显示的物理像素个数

当加上meta标签后，width=device-width，那么等同于css像素等于设备独立像素

视口

浏览器显示页面的屏幕区域

视口单位是css像素px，

布局视口：就是整个网页的大小（也就是html的宽高）

在PC端上，布局视口默认就是浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条

视觉视口：我们在设备上看到的网页的大小（不是指设备的宽度）

用户看到的网页区域大小；浏览器不压缩，我们通过手动缩小，改变观看的区域，此时，视觉时候就变大了，因为我们看到的网页区域变大了；但是它不会影响布局视口，作用是改变了css像素与物理像素的比

布局视口会限制CSS布局；视觉视口决定用户看到的网站内容

理想视口：不需要缩放，就可以直接看到完整页面，而且与设计一样

布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

手动缩放会改变视觉视口的大小

媒体查询与分辨率、缩放、窗口宽度

作用：

• 视口的宽度和高度

• 方向（平板电脑/手机处于横向还是纵向模式）

• 分辨率

• 设备的宽度和高度（device-width，后面好像被弃用）

  值	描述	其他
  width	视口宽度
  max-width	显示区域的最大宽度，例如浏览器窗口
  min-width	显示区域的最小宽度，例如浏览器窗口
  orientation	视窗（viewport）的旋转方向（横屏还是竖屏模式）

  如果浏览器窗口宽小于1920px,就是绿色背景

      @media screen and (max-width: 1920px) {
        body {
          background-color: green;
        }
      }
1
2
3
4
5

横屏是背景色为蓝色

      @media only screen and (orientation: landscape) {
        body {
          background-color: skyblue;
        }
      }
1
2
3
4
5

显示时为红色字体，打印时为黑色字体

@media screen {
  body {
    color: red; 
  }
}

@media print {
  body {
    color: black; 
  }
}
1
2
3
4
5
6
7
8
9
10
11

缩放与窗口大小改变的影响分析：

    

      .box {
        width: 100%;
        height: 500px;
      }
      @media (max-width: 980px) {
        .box {
          background-color: skyblue;
        }
      }
      @media (min-width: 980px) and (max-width: 1560px) {
        .box {
          background-color: greenyellow;
        }
      }
      @media (min-width: 1560px) and (max-width: 3600px) {
        .box {
          background-color: orange;
        }
      }
      @media (min-width: 3600px) {
        .box {
          background-color: green;
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1》直接修改浏览器的缩放（设置或ctrl+滚轮）:

屏幕的分辨率发生改变，放大时，分辨率变小（像素点变大，横向所能排放的像素点变少）；由于html的宽度默认时100%，页面的大小（布局视口）也发生改变，width的css像素变小；

改变缩放时颜色会发生改变；由于我的布局视口是width:100%，默认是1920px（html的宽度默认为100%），和分辨率一样;（而且视觉视口大小和布局视口一样大）默认是橙色；放大时，分辨率的变小，布局视口变小，我们的媒体查询会检测到浏览器窗口宽度变小，颜色会变为草绿色，再变为浅蓝色；如果从100%缩小，分辨率的变大，布局视口和视觉视口变大，媒体查询检测到浏览器窗口宽度变大，颜色会变为绿色

2》窗口大小的变化：

窗口变小，像素点大小没变，窗口能够放的像素点个数变小，所以浏览器分辨率变小；我们的布局视口也变小

缩小窗口，颜色由橙色变为草绿色，再变为浅蓝色，浏览器分辨率变小，布局视口也变小了

**电脑分辨率的修改：**系统分辨率的改变，浏览器的分辨率自然也会跟着改变，默认100%缩放的情况下，浏览器的分辨率和宽高就是与分辨率保持一致

**电脑显示设置中的缩放：**与窗口的缩放效果一样

meta标签

    
1

作用：让当前viewport（布局视口）的宽度等于设备的宽度，同时不允许用户手动缩放

width = device-width

initial-scale=1.0,他会让我们的布局视口跟着视觉视口一起旋转变化

user-scalable=no，

maximum-scale=1.0,因为ios不支持user-scalable标签，所以才使用maximum-scale与minimum-scale

minimum-scale=1.0

适配

适配就是为了页面在不同设备上等比

作用：加上meta标签后还能等比

百分比适配

只能做一些简单的宽高，其他样式不能改，比如字体不能改变

rem适配

rem单位：html跟标签的字体大小

原理：将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间

步骤：

1. 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
2. 开始开发，对设计稿的标注进行转换
3. 对于需要等比缩放的元素，CSS使用转换后的单位
4. 对于不需要缩放的元素，比如边框阴影，使用固定单位px

优点：可以使用完美视口

缺点：px到rem转换麻烦

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

viewport适配

将所有布局视口的宽度调整为设计图的宽度，然后需要动态的根据设备屏幕宽度设置 initial-scale 的值

步骤：

将所有设备的布局视口宽度作为设计图宽度

确定设计图的缩放比例

选中viewport标签，改变content值

原理： 改变不同设备1个css像素与物理像素的比值

优点：所量及所得

缺点：破环了完美视口

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

vw适配：新方案，代替rem

流体（弹性布局flex）+ 固定