01_移动端布局基础

た入场券 2023-10-16 12:59 59阅读 0赞

### 1 移动端布局基础 ###

虽然 H5 的页面与 PC 的 Web 页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。

#### 1.1 移动端设备 ####

移动端设备主要包括 Android、iOS 等手机设备。屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。

常见的移动端设备的屏幕尺寸

<table> 
 <thead> 
  <tr> 
   <th>移动端设备</th> 
   <th>屏幕尺寸（英寸）</th> 
   <th>分辨率（px）</th> 
   <th>设备像素比（dpr）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone 6/6S/7/8</td> 
   <td>4.7</td> 
   <td>750 ×1334</td> 
   <td>2.0</td> 
  </tr> 
  <tr> 
   <td>iPhone 6/7/8 plus</td> 
   <td>5.5</td> 
   <td>1080 × 1920</td> 
   <td>3.0</td> 
  </tr> 
  <tr> 
   <td>iPhone X/XS</td> 
   <td>5.8</td> 
   <td>1125 × 2436</td> 
   <td>3.0</td> 
  </tr> 
  <tr> 
   <td>iPhone XR</td> 
   <td>6.1</td> 
   <td>828 × 1792</td> 
   <td>2.0</td> 
  </tr> 
  <tr> 
   <td>iPhone XS Max</td> 
   <td>6.5</td> 
   <td>1242 × 2688</td> 
   <td>3.0</td> 
  </tr> 
  <tr> 
   <td>iPad Mini 4/2</td> 
   <td>7.9</td> 
   <td>1536 × 2048</td> 
   <td>1.0</td> 
  </tr> 
  <tr> 
   <td>Samsung Galaxy S10+</td> 
   <td>6.4</td> 
   <td>1440 × 3040</td> 
   <td>3.5</td> 
  </tr> 
  <tr> 
   <td>Samsung Galaxy S20</td> 
   <td>6.2（直角）</td> 
   <td>1440 ×3200</td> 
   <td>3.5</td> 
  </tr> 
  <tr> 
   <td>Samsung Galaxy S20+</td> 
   <td>6.7</td> 
   <td>1440 ×3200</td> 
   <td>3.0</td> 
  </tr> 
  <tr> 
   <td>Samsung Galaxy S20 Ultra</td> 
   <td>6.9</td> 
   <td>1440 ×3200</td> 
   <td>3.0</td> 
  </tr> 
 </tbody> 
</table>

*  移动端的浏览器主要包括 Android Browser 和 Mobile Safari，以及国产浏览器。
 *  浏览器的内核主要是 Webkit 内核，对 HTML5 提供了很好的支持。

移动 Web 开发需注意两点

*  移动端设备受屏幕尺寸限制
    
    移动端设备受屏幕尺寸限制，操作的局限性比较大，所以要注意页面的结构不能过于复杂，要提炼出该网站最核心的功能，并简洁清晰地呈现出来。
 *  移动端的操作方式的改变
    
    移动端的操作方式的改变。移动端页面的所有交互活动由鼠标控制变为手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。

#### 1.2 移动Web开发主流方案 ####

##### 1.2.1 单独制作移动端页面 #####

单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。如果是移动设备，则跳转到移动端页面；如果是PC端设备，则跳转到PC端页面。

**单独制作移动端页面优点**

*  可以充分考虑到平台的优势和局限性
 *  创建良好的用户体验设计
 *  网页在移动设备上加载更快

**单独制作移动端页面缺点**

*  移动端网站会产生多个URL（PC端一套URL，移动端一套URL）
 *  维护成本会增加，工作量比较大
 *  重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理

##### 1.2.2 制作响应式页面 #####

响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。

响应式开发主要是为了解决移动互联网浏览的问题。

**响应式页面优点**

*  可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。
 *  便于搜索引擎收录。无论在移动端设备还是PC端上访问的都是同一个链接地址，这样就减少了权重的分散。让网站对搜索引擎更加友好。
 *  节约成本。响应式网站可以兼容多个终端，我们不需要为各个终端编写不同的代码。对于我们来说，减少了大量重复的工作，提高了工作的效率；对于公司而言，节省了人员开支，降低了开发成本，两全其美。

**响应式页面缺点**

制作复杂，同时对于移动端而言，需要加载非常多的 pc 端的样式和图片等资源，影响加载速度，同时费流量。国内流量非常贵。（这也是国内纯响应式网站不多的原因。）

##### 1.2.3 移动Web开发总结 #####

现今大型网站，大部分已经没有做响应式了（例如淘宝）。

我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。

**为什么呢？**

*  试想一下淘宝这种大型网站，一个分页下的商品条目特别多，并且每个商品条目的页面布局结构又十分复杂，而且 pc 端往往显示的信息是要比手机端更多的。
 *  如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。
 *  在这个流量和速度至上的时代，代码冗余先不说，多加载的这些无用的代码而消耗的流量，从某种意义上来说就已经损失了很多的效益。

#### 1.3 移动Web开发基础 ####

##### 1.3.1 视口 #####

视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。

视口主要包括**布局视口**（layout viewport）、**视觉视口**（visual viewport）和**理想视口**（ideal viewport）。视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。

###### 布局视口 ######

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。

###### 视觉视口 ######

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。

###### 理想视口 ######

理想视口是指对设备来讲最理想的视口尺寸。

理想视口下，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。

为了实现理想视口，需要给移动端页面添加 `<meta>` 标签配置视口，在 `<meta>` 标签中，将 name 属性设为viewport，即可设置视口。

`<meta>` 标签常用设置参数

<table> 
 <thead> 
  <tr> 
   <th><strong>参数名</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>设置视口宽度，可以设为正整数（像素）或特殊值 device-width</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置视口高度，可以设为正整数（像素）或特殊值 device-height</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>初始缩放比，取值范围为 0.0~10.0</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>最大缩放比，取值范围为 0.0~10.0</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>最小缩放比，取值范围为 0.0~10.0</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>用户是否可以缩放，其值为 yes 或 no</td> 
  </tr> 
  <tr> 
   <td>viewport-fit</td> 
   <td>视窗填充屏幕的方式。默认值 contain，cover完全填充</td> 
  </tr> 
 </tbody> 
</table>

在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。

##### 1.3.2 分辨率 #####

分辨率分为屏幕分辨率和图像分辨率。屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。

屏幕分辨率 1920×1080 表示水平方向含有 1920 个像素，垂直方向含有 1080 个像素，屏幕上总共有 2 073 600个像素点。

*  在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。
 *  在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。

图像分辨率5 00×200 表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。

**图片的分辨率越低，图片越模糊。图片的分辨率越高，图片越清晰。**

##### 1.3.3 设备像素比 #####

###### 物理像素 ######

物理像素又被称为设备像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为物理像素（设备像素），是分辨率的尺寸单位。

###### CSS 像素 ######

在不同屏幕上，CSS 像素呈现的物理尺寸一致，但 CSS 像素对应的物理像素具数不同。标准的显示密度下，1个 CSS 像素对应一个物理像素，缩放时，1个 CSS 像素对应的物理像素会减增。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

###### 屏幕密度 ######

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。

###### 设备像素比 ######

设备像素(device pixel ratio)比简称为dpr，其定义了物理像素和 CSS 像素的对应关系。设备物理像素和设备独立像素比，即是指在理想布局宽度，使用多少个物理像素来渲染一个 CSS 像素。

**设备像素比 ＝ 物理像素 / CSS像素**

*  在不同的屏幕上，CSS 像素所呈现的物理尺寸是一致的，而不同的是 CSS 像素所对应的物理像素具数是不一致的。
 *  在普通屏幕下 1 个 CSS 像素对应 1 个物理像素，而在 Retina（视网膜屏） 屏幕下，1 个 CSS 像素对应的却是 4 个物理像素。
 *  浏览器在显示网页时，需要将 CSS 像素转换为物理像素然后再呈现
 *  一个css像素最终由几个物理像素显示，由浏览器决定：默认 PC 端，一个 CSS 像素 = 一个物理像素

##### 1.3.4 单位 #####

*  em：相对单位，相对父元素的 font-size 进行计算。
 *  rem：简单来说，rem 就是相对于根元素 `<html>` 的 font-size 来做计算。而我们的方案中使用 rem 单位，是能轻易的根据 `<html>` 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
 *  vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

rem：简单来说，rem 就是相对于根元素 `<html>` 的 font-size 来做计算。而我们的方案中使用 rem 单位，是能轻易的根据 `<html>` 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

*  vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。