移动前端适配（一）基础篇

发表于   |   分类于   |     |   阅读次数

人手一台手机，谁家的产品也不能忽视移动互联网的市场。从PC到Mobile，对于web移动前端需要做好的首要，就是做好各色各样手机端的适配。

移动前端的开发，先来熟悉一些基本的东西：

单位

  1. rem（font size of the root element）：相对于根元素的字体大小的单位；
  2. em（font size of the element）：相对于父元素的字体大小的单位；
  3. px：绝对单位，页面按精确像素展示；
  4. %:相对于父级元素的百分比；
  5. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
  6. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%；
  7. vmin：vw和vh中较小的那个；
  8. vmax：vw和vh中较大的那个。

meta标签

移动端标配的 meta 标签：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

属性值说明：
width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
content="width=device-width, initial-scale=1"，两个都写上去。要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1。

现状

web移动前端的屏幕适配，目前的做法基本有：

百分比流式布局

一般是通过百分比%设置元素的宽度、px设定固定高度。
该方式可以让各种屏幕都适配，但是在各种屏幕下显示都有点不一样；而且在屏幕较大时、元素横向拉伸严重、不太协调。
尤其在处理一些图片元素的时候，若 img 的 height、width 都为 100% 设置，则变形；若 height、width 只是其中一者设置 100%，不变形，但会被父级 div 给 overflow 掉一部分。
折中的做法，把 img 的 height、width 都用 px 固定，然后 img 之间的 margin 用百分比%设置。

限死宽度

页面总体宽度、所有元素均用 px 固定死。
比如总体宽度固定为320px，当屏幕大于320px时、页面居中显示，左右留出空白；当屏幕小于320px时，出现横向滚动条。
这种方式跟平常的PC端没什么差别，（感觉都谈不上移动端的适配）；页面也显得小，点击处小，用户难以操作。

响应式：

一套 html 结构，通过媒体查询 @media 写多套 css 样式，从webPage 到 webApp 直接一步到位，节约成本。
一般是小型项目、成本有限、没明确ui设计时的做法。对于前端开发的确有点心酸，累觉不爱，强烈要求一个产品的 PC 和 Mobile 单独分开…
当然，一般的后台管理系统都采用 bootstrap 啦。

设置viewport进行缩放

比如：以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

1
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

rem移动前端的福音

这是重头戏，敬请关注下一篇：移动前端适配（二）实践篇