一般移动设备的浏览器都默认设置了一个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,即设备的物理像素,可使效果展示更加清晰。
- 移动端需要实现像素换算和设备适配,以及页面元素等比缩放布局等。