您的位置:首页 >> LNMPA >> REM倍数适配-移动端页面自适应
REM倍数适配-移动端页面自适应
[ 孤狼 | 2018-02-08 15:59:30 | LNMPA ]

最新隔壁小娜同学在制作移动端页面时发现了一个新东西,其实也不能算是新东西,因为它已经默默的存在了很久了,只是最新才被人挖出来使用而已。他就是css属性里的rem。


rem是啥?


做过移动端APP的都知道,移动端界面都是有一个比例的。比如Ipone就分为1倍,2倍,3倍当遇到不同尺寸的屏幕时,会自动适应对应的倍数,从而调取最佳显示效果的图片。但是html里一直都是用100%来解决自适配,后来有了一些框架比如bootstrap,相对的优化了一些。但是还是不满足。而rem就是一个类似移动端的倍数基数。

近期(其实我也不知道什么时候),淘宝的手机页面开始使用了rem单位,于是又掀起了一场。。。那个啥。


为什么用?


先看下基础。我们知道,手机页面一般做320px宽和640px宽用来对应IOS和Android。但是这不够完美,因为要做2套,而且每次要适配一个新的尺寸都要做一套。

而有了rem这个倍数单位,我们就只要做一套320px宽的,然后在640px的设备上以2倍的大小显示就行。

对,你想的没错。如果是其他尺寸,只要找到倍数关系,修改下倍数,其他代码都不用动,自动计算。


怎么用?


rem的设置非常简单,首先给html设置一个字体大小基数,就是给html设置一个font-size的值。rem会自动获取这个值作为倍数基数。

html{font-size:1px;}

上面这行的意思就是,设置1rem=1px

同时,我们所有的框架类的width和height等属性都要使用rem来作为数据单位

< div style="width:320rem;height:100rem">打酱油< /div>

上面这个div在页面上,显示为320px宽度,100px的高度。计算就是1*320=320px


理解了上面2段代码之后,我们来看看怎么变

如果我们的设备变成了640px宽,那么上面的代码设置的div也只会显示320px的宽,只有页面的一半。这时候我们就要启动css选择器了。

@media only screen and (min-width: 640px){html {font-size: 2px !important;}}

上面这段代码的意思就是当页面宽度大于等于640的时候,设置倍数基数为2px。


对,你理解的没错,写上这段代码之后,如果在640px宽的设备上运行,计算结果就变成了2*320=640px。这时候,这个div又满屏了。


误区?


就像小娜一样,他把所有的px单位都成了rem,之后。。。

没错,页面整体变大了,虽然比例是没变,但是,字体也跟着变得老大。

所以,我们在使用rem单位的时候一定要注意,rem单位仅仅给框架来使用,比如保证几个div不失去比例。而字体还是要使用px来作为单位,避免跟着扩大。


福利


这里已经准备好了一段自适应的代码,放在css里,就会自动适配常用的移动端设备了。

/*****************rem倍数适配*********************/
html{font-size:100px;}/*320基本配置*/
@media only screen and (min-width: 360px){html {font-size: 112.5px !important;}}/*大于360*/
@media only screen and (min-width: 384px){html {font-size: 120px !important;}}/*大于384*/
@media only screen and (min-width: 400px){html {font-size: 125px !important;}}/*大于400*/
@media only screen and (min-width: 424px){html {font-size: 132.5px !important;}}/*大于424*/
@media only screen and (min-width: 480px){html {font-size: 150px !important;}}/*大于480*/
@media only screen and (min-width: 540px){html {font-size: 168.75px !important;}}/*大于540*/
@media only screen and (min-width: 640px){html {font-size: 200px !important;}}/*大于641*/
@media only screen and (min-width: 680px){html {font-size: 212.5px !important;}}/*大于680*/
@media only screen and (min-width: 720px){html {font-size: 225px !important;}}/*大于720*/
@media only screen and (min-width: 960px){html {font-size: 300px !important;}}/*大于960*/
@media only screen and (min-width: 1024px){html {font-size: 320px !important;}}/*大于1024*/
@media only screen and (min-width: 1280px){html {font-size: 400px !important;}}/*大于1280*/
@media only screen and (min-width: 1440px){html {font-size: 450px !important;}}/*大于1440*/
@media only screen and (min-width: 1920px){html {font-size: 600px !important;}}/*大于1920*/
/*****************rem倍数适配*********************/


2018-02-09

PS:被坑了一下,今天修改了下代码,由原来的font-size:1px; 1:1的比例升级为font-size:100px; 1:100的比例,原因是因为chrome最小字体限制为12px,所以会造成chrome上显示错位.改成1:100的比例之后,对应的写代码宽度的时候除以100即可,例如原来是10rem宽度,现在是0.1rem


转载请注明出处:http://gl.paea.cn/lnmpa/content/2018/02/08/117.html
上一篇 >:Iconiq V2.1-MAC图标生成工具
下一篇 >:木有了