自适应手机h5页面,rem助你适配终端

赞赏 2016-01-21

做手机页面的前端经常遇到这样的问题:

设计通常以640的宽度做设计图,标注的时候都标注的是px
如果按照标注的px来写页面,在不同分辨率的手机上显示效果不尽相同,为了达到更好的显示效果,不得不多次调整页面,甚至裁剪内容

下面就用一种新的方法来解决这个问题


新的方法

淘宝是怎么解决这个问题的,可参考这个:

https://github.com/amfe/article/issues/17


基本用的也是rem,下面说说我们是怎么用的?

rem 

W3C官网描述是“font size of the root element”,即rem是相对于根元素。 

px是绝对值,rem相对值,比如我们把根元素的front-size设置成16px, 那么2rem就是32px,根元素的front-size设置成32px, 那么2rem就是64px。

聪明的人看到这里也许就明白了,给分辨率不同的手机设置不同的front-size, 把页面元素的宽高间隙等用rem来标注,这样元素在不同分辨率的页面上显示的比例就是一样的了。 

比如: 

        分辨率            320px               640px 

根front-size            16px                 32px 

    div的宽度    10rem | 160px   10rem | 320px 

可以看到div在320px的手机里 占到了50%的空间,在640px的手机里也占到了50%的空间。


那么这个根的front-size怎么确定那? 

我们是这么做的:

把整个屏幕分成20份 

原因:设计是640出图的,640/20=32px, 一份是32px,这样设计比较好计算 

如果分辨率是320px,那么根的front-size就是16px, 

如果分辨率是375px,那么根的front-size就是18.75px。

这种方式让每个元素在手机里占的比例是一定的。


那它和百分比的布局有什么区别的? 

百分比的布局: 

  1. 每个百分比都是相对父元素的。有些标签嵌套多层,计算有点繁琐 

  2. 只能在宽度上应用百分比,高度上最顶层的父元素就不能用百分比 比如页面上边的banner条,rem的方式下我可以设置高度是2rem, 百分比的模式我写多少合适那;页面内有一个长方形按钮,宽高的比例是3:2,用百分比的方式怎么实现那


剩下的任务就是为不同的页面设置不同的front-size 

 在页面头部加上这样一段js即可: 

!function(n){var e=n.document,t=e.documentElement,i=720,d=i/36,o="orientationchange"in n?"orientationchange":"resize",a=function(){var n=t.clientWidth||320;n>720&&(n=720),t.style.fontSize=n/d+"px"};e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a(),!1))}(window);


rem化有两个好处:  

  1. 页面效果更接近于设计出的图 

  2. 整体的工作效率提高了,极大的减轻了前端的工作量。  

设计的工作量稍微加大了一些,因为要把比例标出来。 

比如,在640的设计稿上,有个图片的宽度是64px, 就要标注 32*2,而前端写css的时候直接写width: 2rem即可。 

比如有个字体是16px, 就要标注 32*0.5, 前端写:front-size: 0.5rem。  


可以尝试弄一个rem版的bootstrap,给大家试使用!


登陆后阅读全文
阅读 3991 赞赏 7 有用 46 没用 0 收藏 16 分享

注意事项

字体大小设定在320的情况下 最小字体是10px(再小了就看不清了),如果是640的设计稿,那么最小字体就是20px.

手机分辨率分为屏幕分辨率 和 浏览器分辨率, 我们做web都是针对的浏览器分辨率。比如iphone6的屏幕分辨率是1334*750,而浏览器分辨率是:375*672。

   


作者声明:本篇文章系本人原创,欢迎分享,但未经许可,谢绝转载。

0 条留言

小11的头像

小11

有什么电脑问题可以找我

相关文章

CSS 图片自适应显示宽度且居中

chrome的timing中stalled时间过长的问题探究

微信团队做了款 Sketch 插件 WeSketch

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

怎样查找微信斗图资源(除了群里收藏,你还可以通过这种方法找表情包)

北京市住房公积金租房提取方法

微信和QQ如何在语音未发出前撤回

如何获取阿里云万网域名优惠口令?

苹果手机的浏览器中 new Date() 获取不到时间戳 怎么办?

自适应手机h5页面,rem助你适配终端

jquery input change事件不好使,怎么办?

CSS 图片自适应显示宽度且居中

js防止表单重复提交

如何解决 ie 无法加载本地html网页的css样式文件

手机扫一扫
分享文章