web移动端适配方案实践
原创
web移动端适配方案实践
TOC
Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。
1. Step1: 单位选择rem
在移动端，由于设备分辨率和DPR(DevicePixelRatio)差异，使用px(像素)作为单位显然适配起来非常麻烦。常见的单位有：px、em、rem、vw，这四种单位的介绍已经是老生常谈，本方案最后选择的是使用 rem，相比px和em，优势是毋庸置疑的，开发者不必再考虑设备分辨率改变导致的元素布局问题，只需要改变根元素 <html> 的 font-size 就能改变所有的字体大小，相当省心。并且相对于vw，可以直接将移动端页面元素在屏幕居中，再加上良好的兼容性：IE8以上版本和其他浏览器都已经支持，是做响应式页面的不二之选。
2. Step2: 消除DPR差异
消除DPR差异只需要将布局视口大小设为设备像素尺寸，可以通过修改viewport参数来实现。
首先需要计算缩放比，例如 iPhone5-DPR=2，则 scale=0.5
var scale = 1 / window.devicePixelRatio;接着，修改viewport参数initial-scale、maximum-scale、minimum-scale即可
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');3. Step3: 动态设置 html 标签根字体大小
如何实现页面元素跟随设备尺寸等比缩放？step1中已经选择了rem作为单位，在此处只需要固定设置设计稿 html 标签的字体大小，根据计算公式：
html字体大小 = 基准n * (clientWidth / 设计稿宽度)为了方便计算，基准n使用100，设计稿宽度约定使用750px，假设设备宽度为750px (iPhone6/7/8)，那么计算可得根字体大小为font-size: 100px;：
html字体大小 = 基准n * (clientWidth / 设计稿宽度) = 100 * （750 / 750) = 100根据上述推算，在html页面中引入下面代码即可自动完成计算：
(function(doc, win) {
var docEl = doc.documentElement, // 获取html标签
// 页面大小改变事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 动态设置html标签字体大小，便于使用rem缩放
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);注意： rem是相对尺寸单位，是相对于html标签字体大小的单位 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便，不能满足此处页面元素跟随设备尺寸等比缩放的需求 文字字体大小建议不要用rem换算，否则会使得移动端页面字体在PC页面或者大屏手机看起来非常大
4. Step4: 将设计图中的尺寸换算成 rem
Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。
举例来说，原本按照设计稿750px宽度开发的页面，.box在设计稿中的宽高为60px，css如下：
.box {
width: 60px;
height: 60px;
}进行rem转换后为
.box {
width: 0.6rem;
height: 0.6rem;
}即按照公式：
元素rem尺寸(本案例0.6rem) = 设计稿像素尺寸(本案例60px) / 动态设置的html标签的font-size值(本案例100)如：60px宽的div，不必关心屏幕尺寸缩放，只需要除以100，设置 width: 0.6rem; 即可
5. Step5: 媒体查询设置body字体大小
其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小，使得大屏展示更多的文字内容。
本方案采用媒体查询来控制文字大小，将屏幕分为三等：321px以下 / 321px-400px之间 / 400px以上，并针对不同尺寸设置文字大小(px)即可。
@media screen and (max-width: 321px) {
body { font-size:16px; }
header,footer { font-size:16px; }
}
@media screen and (min-width: 321px) and (max-width:400px) {
body { font-size:17px; }
header,footer { font-size:17px; }
}
@media screen and (min-width: 400px) {
body { font-size:19px; }
header,footer { font-size:19px; }
}6. 其他
6.1 特殊css处理
移动端相对于pc端，需要特殊处理一些样式
1. 点击高亮效果
在移动端浏览器会存在点击出现高亮的效果，在项目中一般不需要这个默认的效果，需要把点击颜色设置成透明
-webkit-tap-highlight-color:transparent;2. input默认样式清除
在移动设备的浏览器中input标签一般会有默认的样式，通过border=none,outline=none无法去除如立体效果、3d效果等，需要添加下列样式
-webkit-appearance: none;3.最小宽度和最大的宽度
在移动端开发的时候，如果想限制某个元素的大小，选用 max-width 限制最大值，为了不让用户无止境的缩放，使用min-width 防止在超小屏幕上显示错乱(不考虑小屏幕手机用户)，移动端为了在宽度方向上进行适配会使用百分比宽度，高度方向上由于页面的高度由内容撑开的，所以高度还是使用具体的值。
6.2 IE默认使用最高版本
ie浏览器是web前端一大毒瘤，在开发过程中发现，如果不设置指定meta标签，ie会直接使用ie7内核渲染，这显然不是开发者所希望的，添加下面的meta标签即可：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />7. 总结
本文讲述了开发项目中的移动端的适配方案，采用的是 rem + html根字体大小设置的方案。目前市面上还有很多其他的适配方案，此处不再一一列举，不足之处还请指正。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。