rem

时间 2019-12-04

标签 rem 繁體版

原文原文链接

使用rem原理，62.5%，根据屏幕宽度等比压缩网页css

1、前言html

咱们在编写网页时，每每须要兼顾网页在不一样屏宽状况下的显示
而有时为了省事，没时间写新的页面，也为了兼容考虑，这就须要使用等比压缩了
等比压缩的核心是rem

2、正文
（一）rem的使用css3

rem是css3中新增的一个单位属性
相对长度单位，相对于根元素（即html元素）font-size计算值的倍数
rem在桌面浏览器上的初始值是16px（即1rem=16px）

<!-- rem的初始值 -->
<html style="">
    <head></head>
    <body>
        <div style="font-size:1rem"> 此处的1rem即设备的默认字体大小，桌面浏览器默认字体大小是16px
    </body>
</html>

<html style="font-size:12px">
    <head>
        <body>
            <div style="font-size:1rem">此处的1rem是12px</div>
        </body>
    </head>
</html>

固然还能够在css上进行赋值，或者使用js进行动态的初始赋值chrome

/*使用css进行rem的赋值*/
html{
    font-size:14px;  // 此处的初始赋值表示1rem=14px
}

（二）rem的62.5%和10px的区别浏览器

在桌面浏览器上font-size的默认值是16px；
可知font-size：62.5%；即表示10px；（16*62.5%=10px）
那么font-size：62.5%；和font-size：10px的区别是什么呢？

比较好的解释：
    桌面浏览器默认字体是16px，这种状况下设置成具体像素大小或对应的百分比看起来效果是同样的；
     可是其余类型的设备的默认字体大小不必定是16px
     特别是高分辨率的设备，16px大小的字体在他们上边看起来会很是小，因此不能在body上设置具体像素值，设置成百分比，能够按照设备的基准字体大小给编写的网页设置好最合适的用户浏览的字体大小
     最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的

（三）正确的rem使用方法
如上文所述，使用font-size：62.5%更好布局

html{
    font-size:62.5%;
}

然而坑无处不在
新的问题：咱们开发经常使用的chrome浏览器，支持的最小字体大小是12px字体

/*rem在不一样浏览器下的结果*/
html{
    font-size:62.5%;
}
header{
    height:8rem  //在其余浏览器表示80px，在chorme上表示96px
}

解决办法：scala

font-size:625%
    1rem = 100px 
    以此为单位进行换算，能够避免出现以上的问题

(四) em和rem的区别设计

rem是相对于根节点的font-size计算
em是相对于父节点的font-size计算

<html>
    <head>
        <style>
            html{ 
                 font-size: 625%  
            }
            .child{
                 height: 1rem;
                 width: 1rem;  
            }  
        </style>
    </head>
    <body>
　　　　<!-- rem是相对于根节点的font-size计算 -->
        <div class="child">此处的1rem = 100px</div>

　　　　<!-- em是相对于父节点的font-size计算 -->
        <div style="font-size:10px;"><!-- 父元素的字体大小是10px-->
            <div style="height:1em;width:1em;"></div><!-- 因此子元素的em是1em=10px；-->
        </div>
    </body>
</html>

(五) <meta name="viewport">的含义code

<!-- html头部通常会加这么一行代码 -->
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    </head>    
</html>

那么，他有什么做用呢？
viewport用于移动端自适应
但若是是浏览器流动布局的网页那状况会很是糟糕，设想一个宽度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性很是差。
为了让手机也能得到良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的做用就是建立一个虚拟的窗口(viewport)，并且这个虚拟窗口的分辨率接近于桌面显示器

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale 容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale 容许用户的最大缩放值，为一个数字，能够带小数
height 设置layout viewport 的高度，这个属性并不重要，不多使用
user-scalable 是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

(六) 根据屏幕宽度等比压缩网页

//根据屏幕计算设计rem的标准中
 var documentWidth = document.documentElement.offsetWidth;

 if(documentWidth > 1268 ){
    document.documentElement.style.fontSize = documentWidth/166 + "px";
 }

使用上边代码，能够根据屏幕宽度等比压缩网页
但有两个前提：

一、css代码涉及大小的，统一使用rem进行设置
二、html头部不能使用：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
同理：当不须要等比压缩网页时，记得把这行代码加上去，不然等比压缩一直存在
原理：是根据屏宽动态的设置根节点font-size，以此进行rem的初始设置，实现对不一样屏幕宽度的适配。

1. rem
2. react适配 rem px to rem
3. CSS-rem
4. css3--rem
5. css rem
6. Rem & Viewport
7. rem适配布局（rem+less+媒体查询和 rem+flexible.js）
8. vue px 转rem vue px转换为rem
9. rem布局
10. rem 单位
更多相关文章...