你的位置:首页 > 软件开发 > 网页设计 > 移动端自适应布局的高效方法,欢迎批评或指正

移动端自适应布局的高效方法,欢迎批评或指正

发布时间:2015-05-12 16:00:36
是我个人偏好的一种方法,优点是可以省去大量的适配时间和精力,一、总的办法是首先使用一点JS判断设备宽度,再给根元素html设置font-size,从而适配整个页面。二、CSS中,无论是字号还是宽高,如果都使用em或rem单位(1px的可以无视),最终都是由根元素html的font ...

是我个人偏好的一种方法,优点是可以省去大量的适配时间和精力,

一、总的办法是首先使用一点JS判断设备宽度,再给根元素html设置font-size,从而适配整个页面。

二、CSS中,无论是字号还是宽高,如果都使用em或rem单位(1px的可以无视),最终都是由根元素html的font-size大小决定的。举个例子,比如设计图是640px宽,我一般会设置html的font-size为20px, 假设一个移动端的body宽度(或者可用宽度,这个视情况定)为clientWidth,那么要在这个终端还原设计图,就需要将适配后的html的font-size数值改为clientWidth/(640/(20*2))(移动端字号一般要除2),再渲染整个DOM。JS如下:

function adaptFun(designPercent){

这样,页面在绝大多数终端上将呈现原设计图效果,即使有Device-pixel-ratio1.5或3的设备,由于相对位置不会变,也只能写一句媒本查询即可(除非特别复杂的页面,否则媒本查询也不需要)。

四、优点和感概

如果靠媒体查询适配,会写不少代码,很头疼,以后有相似的项目想要借鉴,甚至还需重新适配,花去大量时间。

我个人觉得,这种只要写好一个设计宽度的版本(比如写一个640或320宽的)就好,其它自动适配,和写PC页面差别不大。

测试地址:http://game.feiliu.com/zk/ysg/main/index.html


原标题:移动端自适应布局的高效方法,欢迎批评或指正

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录