rem

inapt 发布于2019-08-02 15:13 / 3157人阅读

摘要：使用原理，，根据屏幕宽度等比压缩网页一前言我们在编写网页时，往往需要兼顾网页在不同屏宽情况下的显示而有时为了省事，没时间写新的页面，也为了兼容考虑，这就需要使用等比压缩了等比压缩的核心是二正文一的使用是中新增的一个单位属性相对长度单位，相对

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

一、前言

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

二、正文
（一）rem的使用

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



    
    
         此处的1rem即设备的默认字体大小，桌面浏览器默认字体大小是16px
    



    
        
            此处的1rem是12px

当然还可以在css上进行赋值，或者使用js进行动态的初始赋值

/*使用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
}

解决办法：

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

(四) em和rem的区别

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


    
        
    
    
　　　　
        此处的1rem = 100px

(五) 的含义

那么，他有什么作用呢？
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";
 }

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

1、css代码涉及大小的，统一使用rem进行设置
2、html头部不能使用：
同理：当不需要等比压缩网页时，记得把这行代码加上去，否则等比压缩一直存在
原理：是根据屏宽动态的设置根节点font-size，以此进行rem的初始设置，实现对不同屏幕宽度的适配。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53983.html

Stylus插件开发教程

摘要：你还需安装一个依赖，告诉使用者，你这个是基于哪个版本开发的，当然你可以不安装这个依赖，那只能自己用了。开发调试在根目录中运行在本机全局为做一个软链接，如果你移动了目录你得重新做软链接。因为你在前面添加了文件事实上导入的文件是。由于Stylus的强大，它支持SCSS LESS 灵活的书写方式，然后它不用像SCSS安装Ruby，不是特别出名，流行的工具没有使用它，只是在小的圈子里面挺火滴...

cyqian 2019-08-30 12:57 评论0 收藏0
【基础】EM 还是 REM？这是一个问题！

摘要：但问题是究竟该用还是呢关于这个问题一直存在比较大的争议。上述现象的出现，是因为是相对于当前元素字体的大小。什么是表示，它是相对于根元素的长度单位。还是在项目开发中究竟是选用还是一直以来争议不断。这就是前述规则中的第一条规则。简言应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM，根据设备尺寸缩放显示元素的大小。这就使得组...

lk20150415 2019-08-29 15:07 评论0 收藏0
了解并使用CSS中的rem单位

摘要：写了一篇文章，里面记录了他在实际使用单位过程中的一些感受。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用，模块用单位，模块内的元素使用单位。随后在中单位的强大之处提出了他的观点。什么是 rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过R.E.M.这个词了。在这个乐队眼中，这个词是浅睡眠时眼球的快速转动的缩写，而在 css 中，rem 代表着...

BWrong 2019-08-29 11:32 评论0 收藏0
REM如何无视手机系统字号调整

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。此问题属于REM的优化解决如下问题在移动端rem布局中，多数环境多数浏览器下rem的计算妥妥的没有问题，但是部分环境，比如某些软件内嵌的webvie...

王笑朝 2019-08-02 15:59 评论0 收藏0
REM如何无视手机系统字号调整

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。此问题属于REM的优化解决如下问题在移动端rem布局中，多数环境多数浏览器下rem的计算妥妥的没有问题，但是部分环境，比如某些软件内嵌的webvie...

codergarden 2019-08-29 13:59 评论0 收藏0