web前端_rem移动适配

时间 2019-11-10

标签 web 前端 rem 移动适配栏目 HTML 繁體版

原文原文链接

前言javascript

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

1.rem为什么物html

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

2.rem怎么用chrome

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

其实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.因此这是怎么适配到移动端？google

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

4.这样就完美了？

不。不是的。这样作在普通屏幕上是已经完美了。可是苹果手机多是retina屏幕，因此还须要作进一步的兼容。就是你的屏幕宽度须要*你的手机window.devicePixelRatio(设备的dpr)。而后，基本就完美了~

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