rem适配

适配是什么

程序猿把设计狮制作的效果图应用到不同的手机，对不同的屏幕进行界面调整的过程，确保界面不变形，呈现效果图的位置、尺寸、比例。

rem是什么

px:     逻辑像素
em:     一个汉字的宽度
rem:    html标签的font-size
对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。
只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。
总结：
最后的公式：页面元素的rem值 =  页面元素值（px） /  （屏幕宽度  /  划分的份数）
屏幕宽度/划分的份数就是 htmlfont-size 的大小
或者：页面元素的rem值 =  页面元素值（px） /  html font-size 字体大小

rem技术方案：

1.rem+媒体查询：
2.js+rem：

rem实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }/*以iphone6为例：一个字大小16px，十个字为160px
           但是手机宽度为375，字只占了不到一行
           目标：
               十个字，在不同手机上总是铺满一行
            需设置字体大小，使字体随着手机宽度变化*/
        @media only screen and (width:320px) {
            div{
                font-size: 32px;
            }
        }
        @media only screen and (width:375px) {
            div{
                font-size: 37.5px;
            }
        }
        @media only screen and (width:414px) {
            div{
                font-size: 41.4px;
            }
        }
        /*  div{
            font-size: 37.5px;
        } */
    </style>
</head>
<body>
    <div>国破山河在城春草木深</div>
</body>
</html>

rem适配学习

rem适配

适配是什么

rem是什么

rem技术方案：

rem实例：