viewport视口

  一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以PC上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

  上面截图中的方块为100px，但是在iphone6设备的默认视口下显示的非常小，因为默认视口为980px。为了解决这个问题，可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

   width=device-width表示视口宽度为设备的宽，也就是逻辑像素的大小。initial-scale=1.0表示初始缩放比例为1，即正常大小。下面是设置了viewport视口后的样子。

   viewport可选的值有：

属性	值	描述
width	正整数或devive-width	定义视口的宽度，单位为像素
height	正整数	定义视口的高度，单位为像素，不常用
initial-scale	比例值	定义初始缩放值
minimum-scale	比例值	定义缩小最小比例
maximum-scale	比例值	定义放大最大比例
user-scalable	yes/on	定义是否允许用户手动缩放页面，默认值yes

总结如下：
- 在移动端布局中，一定要提前设置好视口大小，即vsCode默认添加形式，

<meta name="viewport" content="width=device-width, initial-scale=1.0">，这样可以保证CSS逻辑像素不会受到缩放处理。

750px的设计稿

  通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计，即750px。当然也可以按照逻辑像素进行设计，即375px，但是一般设计师不会这么干，主要为了设计稿更加清晰。

  所以前端在量取尺寸的时候，需要除以2，才能适配页面中的CSS逻辑像素值。好在现代UI工具如：蓝湖、PxCook等都具备自动除以2的标注信息方式，后面视频有详细介绍。

  那么如何让唯一的一种设计稿尺寸，去适配不同设备的像素呢？让页面元素能够等比进行放大缩小呢？可通过rem和vw这两种相对单位来进行实现，这是重点学习内容。

总结如下：
- 移动端UI设计稿尺寸大小为750px，即设备的物理像素，可使效果展示更加清晰。
- 移动端需要实现像素换算和设备适配，以及页面元素等比缩放布局等。