TOC
Write By CS 逍遥剑仙
我的主页: http://www.csxiaoyao.com/
- GitHub: https://github.com/csxiaoyaojianxian
- Email: sunjianfeng@csxiaoyao.com
- QQ:
移动端 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 / Windows.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 Windows ? '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, Windows);
注意:
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 根字体大小设置的方案. 目前市面上还有很多其他的适配方案, 此处不再一一列举, 不足之处还请指正.
nutxdnrjb4.jpeg
来源: https://www.qcloud.com/developer/article/1497057