移动端开发布局（一）— 视口、二倍图、常见布局

1. 移动端基础

1.1 常见移动端屏幕尺寸

1.2 移动端开发

• 移动端开发，就是编写移动端的网页
• 移动端浏览器主要对webkit内核进行兼容
• 移动端开发主要针对手机端开发，pad屏幕较大，可以使用PC端界面
• 现在移动端碎片化严重，分辨率和屏幕尺寸不一
• 经常使用谷歌浏览器模拟手机界面并调试

2. 视口

2.1 布局视口 layout viewport

移动设备的浏览器默认设置了布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS，Android 都将这个视口分辨率设为980像素（由于PC端的网页一般都是在1000左右，所以差不多都能显示完），一般里面的元素看上去很小，一般默认可以通过手动缩放。

2.2 视觉视口 visual viewport

用户看到的网站的区域。

可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口还是保持原来的宽度。

2.3 理想视口 ideal viewport

• 为了使网站移动端有最理想的浏览和阅读宽度而设定
• 需要手动添加 meta 视口标签通知浏览器操作
• meta视口标签的主要目的：设备有多宽，我们布局的视口就多宽
• 总结：开发时使用理想视口，理想视口是将布局视口的宽度修改为视觉视口
  • 由于宽度设置的太宽（980像素），而手机屏幕太窄，两者不相匹配
  • 最好的方法是将 布局视口的宽度 修改为 视觉视口
  • 也就是说，将布局的宽度与手机屏幕宽度保持一致。

2.4 meta标签

语法：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

最标准的viewport设置

• width=device-width视口宽度和设备保持一致
• initial-scale=1.0视口默认的缩放比例1.0
• user-scalable=no不允许用户自行缩放
• minimum-scale=1.0最小允许的缩放比例1.0
• maximum-scale=1.0最大允许的缩放比例1.0

3. 二倍图

此时就涉及到了 物理像素、物理像素比

3.1 物理像素、物理像素比

• 物理像素即就是屏幕上的最小颗粒，是物理真实存在的。
• 物理像素就是分辨率，例如分辨率为 750*1344，那么一行就可以放750个像素点
• 在PC端，1像素 等于1个物理像素，但是在移动端就不一定
• 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• 在iPhone6/7/8，其分辨率为 7501334，但是在移动端调试窗口上，显示的是 375667 ，分辨率缩小了一半，在此，1px =2倍物理像素点（物理像素比为2）

下图是各个手机的开发尺寸以及物理像素比，

3.2 二倍图

• 电脑和手机的屏幕尺寸还是有差异的，所以不能像PC端一样1px=1个物理像素点

• 手机屏幕比较小，如果他的物理像素比为1:1，那么它显示不了像PC端屏幕大小一样的网页

• 那么，就要在移动端有限的空间里，压缩出更多的物理像素，即Retina（视网膜屏幕）

• 视网膜屏幕是一种技术，是将更多的物理像素点压缩到一块屏幕上，从而达到更高的分辨率，并提高屏幕的细腻程度

• 如下图
  

• 如何使用这门技术，将这门技术运用到图片上，利用二倍图，可以将图片压缩，然后达到更高的分辨率，提高图片质量。

• 例如一张图片在PC端是100100，但是在移动端显示的就很模糊。这样我们将这张图片手动缩小到5050，这样图片就会很清晰，我们需要的图片比我们实际的图片小2倍，这样的方式就是二倍图。

• 此时我们需要用到 背景缩放 属性

3.3背景缩放

background-size属性规定背景图像的尺寸

background-size: width height;

单位：长度 | 百分比 | cover | contain

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（等比例拉伸，完全覆盖，会有一边超出）

contain把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。（等比例拉伸，任意一边先与盒子重合即可）

4. 移动端技术解决方案

4.1 移动端的特殊样式

 /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

4.2 移动端技术解决方案

1.移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

我们可以放心使用 H5 标签和 CSS3 样式。

同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

2.移动端公共样式

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

官网地址： http://necolas.github.io/normalize.css/

5. 移动端常见的布局

(1) 移动端单独制作

• 流式布局 （百分比）
• flex布局 （推荐）
• rem布局+less+媒体查询
• 混合布局

(2) 响应式布局

• 媒体查询
• Bootstrap