移动端布局-分辨率和视口

秒速五厘米 2022-01-22 08:11 274阅读 0赞

客观上，客户端浏览器中用于呈现网页的区域大小不同，即viewport(视口)不同，主观上，我们的页面代码又想给每一位用户完美的体验，这就需要网页具有变通的能力，让布局和呈现能够根据视口的变化而变化。

响应式布局可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

要实现响应式布局，先要理解几个概念：

### 物理分辨率和逻辑分辨率 ###

我们再买手机的时候应该都留意到了一个重要的指数，就是分辨率，在手机中实际上有两个分辨率，一个逻辑分辨率，一个物理分辨率。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

*  物理分辨率是指屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。  
    以iPhone6为例，分辨率为750×1334的屏幕来说，即每一条水平线上包含有750个像素点，共有1334条线。
 *  逻辑分辨率：如果说物理分辨率是硬件所支持的屏幕分辨率，那么逻辑分辨率就是软件支持的分辨率，早期的手机如：iPhone3，逻辑分辨率和物理分辨率相等，那么网页中的1px横线就占用手机的一行的320个像素，而现在的物理分辨率大多是逻辑分辨率的倍数，网页中的1px横线就占用手机的两行、三行…

相应的手机中的一个像素有逻辑像素和设备像素之分，简单的说我们在CSS中设置的像素值不等于在手机中显示的像素值，不信你可以用手机截图看看。

*  设备独立像素（Device Independent Pixel）：是逻辑像素，与设备无关的，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。
 *  设备像素（Device Pixel）：是物理像素，设备能控制显示的最小单位。

在前端领域，主要用的是CSS像素，是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。一个CSS像素在移动端真实显示多少像素要看物理像素与逻辑像素得比率，如iPhone6的物理像素是750px×1334px，逻辑像素是365\*667，倍率是2，那么css中设置的1px就在设备中占用2个像素点。

倍率也叫设备像素比(device pixel ratio )，简写为`dpr`  
设备的逻辑像素和物理像素的关系满足如下公式：  
逻辑像素宽度*倍率 = 物理像素宽度  
逻辑像素高度*倍率 = 物理像素高度

### 视口 viewport ###

视口是浏览器上用来显示网页的那部分区域。用来约束网页中最顶级块元素html标签。viewport分为visual viewport,layout viewport,ideal viewport。  
普通pc屏幕三者相等；移动端的情况就比较复杂。

##### 1、Layout viewport（布局视口） #####

**layout viewport是浏览器设置的默认显示大小，由浏览器厂商决定，一般为980px。**

智能手机盛行后，迫切需要在手机浏览器上也能够浏览网页，但是问题来了，因为手机屏幕太小，用户并不能很好地通过手机等设备访问网页。Apple的解决方案是在Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px，因为与PC端的网页主流宽度宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏，如果网页的宽度超出980px，则出现横向的滚动条。

> iOS, Android浏览器的layout viewport基本都是: 980px  
> BlackBerry浏览器的layout viewport: 1024px

在手机上如果layout viewport是980px,而手机的物理分辨率750px,相当于在750的空间内显示980的内容，实际上是对网页进行了整体的缩小，缩小后文字的小于12px,线条小于1px,将被分别显示为12px和1px。  
见下图，图片中98px*98px的绿色方框实际显示为75px*75px;13px和12px的文字显示为12px,16px文字进行了相应的缩小;1px的线条还是显示为1px  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

这样的页面显然不利于阅读，多数情况下移动端的布局需要通过viewport元标签调整layout viewport的大小来避免这个情况。

##### 2、visual viewport（视觉视口） #####

visual viewport（视觉视口）是手机屏幕的可视区域，大小就是屏幕显示器的像素分辨率；visual viewport是设备决定的

##### 3、Ideal viewport（理想视口） #####

Ideal viewport就是我们通常说的屏幕逻辑分辨率。因为前面讲过的css像素是逻辑的，虚拟的，具体在手机中显示几个物理像素取决于设备，Ideal viewport相当于浏览器给我们前端用的、能真正用来显示网页内容的区域，所以移动端布局是我们设置layout viewport等于Ideal viewport，来方便我们使用css布局。

### viewport元标签 ###

移动设备默认的viewport是layout viewport，通常是980px,通常情况下我们通过修改这个值还完成移动的适配，这是移动的常用的一段代码：

这样做是将layout viewport的宽度设置为 ideal viewport的宽度，指定页面的初始缩放比例为不缩放，指定用户能够放大的最大比例为1，不允许用户缩放视口。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td align="left">控制 layout viewport 的大小。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td align="left">和 width 相对应，指定高度。</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td align="left">初始缩放比例，也即是当页面第一次 load 的时候缩放比例。</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td align="left">允许用户缩放到的最大比例。</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td align="left">允许用户缩放到的最小比例。</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td align="left">用户是否可以手动缩放</td> 
  </tr> 
 </tbody> 
</table>

这个设置不是一定的，可以根据需要进行设置，工作中可以通过设置layout viewport为逻辑分辨率也可以设置为物理分辨率，下图以iPhone6为例，设置 layout viewport为375和750对比下显示效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]

### 绝对单位和相对单位 ###

##### 绝对单位：像素单位,px就是绝对单位 #####

##### 相对单位: #####

rem和em相对单位

rem（font size of the root element）是指相对于根元素(html)的字体大小的单位  
em（font size of the element）是指相对于父元素的字体大小的单位。  
它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

vh和vw相对单位

相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。  
vw基于视窗的宽度计算，1vw 等于视窗宽度的百分之一;  
vh基于视窗的高度计算，1vh 等于视窗高度的百分之一。

移动端布局目前最常用的是rem,配合媒体查询，设置不同的 html元素 的 font-size，不同分辨率下1个rem实际的像素值就是不同的，这在移动端非常重要。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20220122/6b9ec3091c7d4a1db71a7544a95b7ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20220122/1e821caef56447b69b927d362fb832b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: /images/20220122/0450362a608142d7936a7d3351461e31.png