原文网址:https://www.youyong.top/article/1158d21fba20
做手机页面的前端经常遇到这样的问题:
设计通常以640的宽度做设计图,标注的时候都标注的是px
如果按照标注的px来写页面,在不同分辨率的手机上显示效果不尽相同,为了达到更好的显示效果,不得不多次调整页面,甚至裁剪内容
下面就用一种新的方法来解决这个问题
原文网址:https://www.youyong.top/article/1158d21fba20
做手机页面的前端经常遇到这样的问题:
设计通常以640的宽度做设计图,标注的时候都标注的是px
如果按照标注的px来写页面,在不同分辨率的手机上显示效果不尽相同,为了达到更好的显示效果,不得不多次调整页面,甚至裁剪内容
下面就用一种新的方法来解决这个问题
原文网址:https://www.youyong.top/article/1158d21fba20
新的方法
淘宝是怎么解决这个问题的,可参考这个:
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。
这种方式让每个元素在手机里占的比例是一定的。
那它和百分比的布局有什么区别的?
百分比的布局:
每个百分比都是相对父元素的。有些标签嵌套多层,计算有点繁琐
只能在宽度上应用百分比,高度上最顶层的父元素就不能用百分比
比如页面上边的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化有两个好处:
页面效果更接近于设计出的图
整体的工作效率提高了,极大的减轻了前端的工作量。
设计的工作量稍微加大了一些,因为要把比例标出来。
比如,在640的设计稿上,有个图片的宽度是64px, 就要标注 32*2,而前端写css的时候直接写width: 2rem即可。
比如有个字体是16px, 就要标注 32*0.5, 前端写:front-size: 0.5rem。
可以尝试弄一个rem版的bootstrap,给大家试使用!
字体大小设定在320的情况下 最小字体是10px(再小了就看不清了),如果是640的设计稿,那么最小字体就是20px.
手机分辨率分为屏幕分辨率 和 浏览器分辨率, 我们做web都是针对的浏览器分辨率。比如iphone6的屏幕分辨率是1334*750,而浏览器分辨率是:375*672。
作者声明:本篇文章系本人原创,欢迎分享,但未经许可,谢绝转载。
共 0 条留言