web移动端适配方案实践

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/CSXIAOYAOJIANXIAN/article/details/100552937

web移动端适配方案实践

文章目录

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(像素)作为单位显然适配起来非常麻烦。常见的单位有:pxemremvw,这四种单位的介绍已经是老生常谈,本方案最后选择的是使用 rem,相比pxem,优势是毋庸置疑的,开发者不必再考虑设备分辨率改变导致的元素布局问题,只需要改变根元素 <html>font-size 就能改变所有的字体大小,相当省心。并且相对于vw,可以直接将移动端页面元素在屏幕居中,再加上良好的兼容性:IE8以上版本和其他浏览器都已经支持,是做响应式页面的不二之选。

2. Step2: 消除DPR差异

消除DPR差异只需要将布局视口大小设为设备像素尺寸,可以通过修改viewport参数来实现。

首先需要计算缩放比,例如 iPhone5-DPR=2,则 scale=0.5

var scale = 1 / window.devicePixelRatio;

接着,修改viewport参数initial-scalemaximum-scaleminimum-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);

注意

  1. rem是相对尺寸单位,是相对于html标签字体大小的单位
  2. 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便,不能满足此处页面元素跟随设备尺寸等比缩放的需求
  3. 文字字体大小建议不要用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根字体大小设置的方案。目前市面上还有很多其他的适配方案,此处不再一一列举,不足之处还请指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券