前端页面在各端的适配性探讨.docx

《前端页面在各端的适配性探讨.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、前端页面在各端的适配性探讨随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:metaname='viewport'content='width=device-widt

2、h,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>大小之辨-完全自适应“完全自适应式”是卤煮对越此方案的叫法，由于卤煮现在找不到官方名称，所以暂时就这样叫它。这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询熟悉，根据不同的屏幕宽度，调整样式。卤煮之前也是这样想的，但是你需要考虑到

3、界面上的许多元素需要设置字体，如果用mediaquery为每个元素在不同的设备下都设置不同的属性的话，那么有多少种屏幕我们的css就会增加多少倍。实际上在这里，我们采用的是js和css熟悉rem来解决这个问题的。REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。html{font-size:10px;}div{font-size:1rem;height:2rem;width:3rem;border:.1remsolid#000;}采用以上写法，div继承到了html节点的font-size，为

4、本身定义了一系列样式属性，此时1em计算为10px，即根节点的font-size值。所以，这时div的高度就是20px，宽度是30px，边框是1px，字体大小则是10px;一旦有了这样的方法，我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。假设我们现在设计的标准是iphone5s，iphone5系列的屏幕分辨率是640。为了统一规范，我们将iphone5分辨率下的根元素font-size设置为100px;html{font-size:100px;}那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根元素字体大小:/*

5、数据计算公式640/100=device-width/x可以设置其他设备根元素字体大小ihone5:640：100iphone6:750:117iphone6s:1240:194*/vardeviceWidth=window.documentElement.clientWidth;document.documentElement.style.fontSize=(deviceWidth/6.4)+'px';在head中，我们将以上代码加入，动态地改变根节点的font-size值，得到如下结果:接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值

6、。当然，如果是移动设备，屏幕会有一个上下限制，我们可以控制分辨率在某个范围内，超过了该范围，我们就不再增加根元素的字体大小了:vardeviceWidth=document.documentElement.clientWidth>1300?1300:document.documentElement.clientWidth;document.documentElement.style.fontSize=(deviceWidth/6.4)+'px';一般的情况下，你是不需要考虑屏幕动态地拉伸和收缩。当然，假如用户开启了转屏设置，在网页加载之后改变了屏幕的宽

7、度，那么我们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变化就可以做到动态切换元素样式:window.onresize=function(){vardeviceWidth=document.documentElement.clientWidth>1300?1300:document.documentElement.clientWidth;document.documentElement.style.fontSize=(deviceWidth/6.4)+'px';};为了提高性能，让代码开起来更加完美，可以为它加上节流阀函数:window.onre

8、size=_.debounce(function(){vardeviceWidth=docum