移动端rem适配

来源：互联网发布：dede cms 编辑：程序博客网时间：2024/05/22 13:07

上个礼拜做了一个移动端的页面，因为做的比较少，花了一上午也没有做出一个理想的适配，最后因为时间只能妥协用@media+px。
用@media的弊端很大，采用的px单位，需要在不同的屏中都要重新设置值，造成代码的冗余、臃肿。（这种方法很蠢！！）
今天在网上搜了一个比较理想的方法，采用rem。
rem是CSS3新增的一个相对单位（root em,根em），这个单位引起了广泛光柱。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略rem设定的字体大小。下面就是一个栗子：

 p{font-size:14px;font-size:.875rem;}

注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者同时使用。

px与rem的选择

对于只需要适配少部分手机设备，且分辨率对页面印象不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

网上找了两种设置rem的方法。

第一种采用@media

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/@media screen and (max-width:359px) and (min-width:320px) {    html,body{        font-size: 50px !important;    }}@media screen and (max-width:374px) and (min-width:360px) {    html,body{        font-size: 56.25px !important;    }}@media screen and (max-width:413px) and (min-width:375px) {   html,body{        font-size: 58.5px !important;    }}@media screen and (max-width:639px)  and (min-width:414px){   html,body{        font-size: 64.6px !important;    }}@media screen and (min-width:640px) {   html,body{        font-size: 100px !important;    }}

这种方法有一个弊端，需要计算每一个屏的基础值。

第二种获取通过js设置根元素的字体大小

<script type="text/javascript">　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script>

问题：为什么要设置Html的font-size？
答：
1.是因为这里是作为一个基础数值，换一个方向去想，这里先不乘以100以免产生无解。
例如：设计稿宽度是640px,有一个元素设计稿上的宽度是50px，设备物理宽度是320px，那么根据比率计算出实际涉笔里面宽度是：50*(320/640)=25px；首先这里没有问题，实际上的宽度根据(320/640)这个比率计算出来了是25px，这个(320/640)相当于1rem。
2.
1）为了计算方便，我们后面把比率乘以了100，(320/640)100,那么相对应这个元素在设置数值的时候就需要除以100了，这样可以保证最后出来的数值不变，相对于0.5rem=50（320/640），最终出来的数值一直。
2）一般浏览器的最小字体是12px，如果font-size=（320/640）px，相当于font-size=0.5px,那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，乘以100后，font-size是50px。传送门

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0,maxinum-scale=1,mininum-scale=1">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script>    document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 +'px';    </script></head><body>    <p style="font-size:0.14rem">        <span>14px字体</span>        <span style="font-size:14px;">14px字体</span>    </p></body></html>

1.物理像素是320的显示效果
这里写图片描述
2.物理像素是640的显示效果

目前感觉第二种方法比较好用，以后如果发现其他的更好的方法再更新…

坚持每天做一次笔记无论质量好坏…..

阅读全文

0 0