web前端_rem移动适配

前言

这里只说rem原理及原理的一个基本测试。so，需要rem相关的js代码或者css media配置，请移步google|baidu。

1.rem为何物

首先rem是个什么鬼？长的有点像文字单位em。答案是~rem也是一种度量单位，常用于适配各种移动端适配上。

2.rem怎么用

rem怎么用，首先就得知道rem的原理。

其实rem，就是根据html标签font-size大小而改变的一个值。比如当你将Html的font-size设置为100px，那么这是你设置1rem就等于100px了。就是这么简单，上事例代码：

<!DOCTYPE html>
<html>
<head>
    <title>rem原理</title>
    <meta charset="utf-8">
    <style type="text/css">
        html {
        }
        body {
            font-size: 16px;
        }
        .result {
            width: 1rem;
            height: 1rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        rem原理：<br>
        rem是基于html的font-size进行调整的，可以根据屏幕的宽度动态设置html的font-size值，从而保证rem对应的比例正确<br>(如chrome默认为16px，就是1:16，设置为x，则是1:x)
    </div>
    <button onclick="changeFontSize(100)">font-size:100</button>
    <button onclick="changeFontSize(50)">font-size:50</button>
    <div class="result"></div>

    <script type="text/javascript">
        const doc = document.documentElement;
        function changeFontSize(size) {
            doc.style.fontSize = size + 'px';
        }
    </script>
</body>
</html>
View Code

原理就是这样。通过改变html根font-szie的值来设置rem的值。

3.所以这是怎么适配到移动端？

答案是~通过对window对象获取宽度然后除以设计图的宽度，最后乘以一个你希望的比例。这样，你之后的元素就可以用设置图的宽高除以你设置的比例+rem单位来设置了。比如屏幕宽320，你设计图宽600，你的比例设为100，那么html的font-size就设置为 320*100/600 px，然后你的元素在设计图宽60px，你只需要转成rem，即把它设成 60/100 rem即可。将动态设置的代码写成js执行(网上自行搜索)，之后就一劳永逸了。

4.这样就完美了？

不。不是的。这样做在普通屏幕上是已经完美了。但是苹果手机可能是retina屏幕，所以还需要做进一步的兼容。就是你的屏幕宽度需要*你的手机window.devicePixelRatio(设备的dpr)。然后，基本就完美了~

 

贴个感觉不错的rem介绍网站 :)

posted @ 2016-02-17 19:11  自己的心灵猎手  阅读(378)  评论(0)    收藏  举报