前端rem单位的使用研究

分析网易新闻手机web端，http://3g.163.com/,发现里面大量使用了rem这个单位进行计算大小。

针对rem这个单位有如下解析：

px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了。

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视。

参考：http://www.uizph.com/post-329.html?utm_source=tuicool&utm_medium=referral

前端rem单位的使用研究相关推荐

前端rem单位的正确使用姿势(转)
2019独角兽企业重金招聘Python工程师标准>>> 写这篇文章是因为自己被rem这个坑绊过脚,因此特意去研究了下rem这个单位. 简单阐述下px.em.rem之前的关系(其实网上 ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
了解和使用CSS中的rem单位
什么是雷姆单位? 在收听广播或音乐播放器之前,您可能遇到过" REM"一词.与他们的音乐同伴不同,它们在深度睡眠期间被称为"快速眼动",而CSS rem则代表& ...
移动端rem单位用法
1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...
h5学习笔记：rem单位在一些安卓机计算异常
1.项目描述一款App+h5进行混合开发,App通过webview方式对h5进行远程加载.h5采用了vuejs进行开发,适配采用了px2rem插件方式进行批量转换. 2.项目异常现象混合开发增加了 ...
在react next 中使用rem_CSS中的rem：了解和使用rem单位
深入了解 CSS 中的 rem 单位,它是具有良好浏览器支持的相对大小调整的单位,这里来学习如何有效地使用它们. 什么是 rem 单位? rem(font size of the root eleme ...
js rem 单位适配（手机、平板、PC）？
js rem单位适配 <script type="text/javascript">// 设备区分 (安卓.火狐.平板.PC)var os = function() { ...
关于使用rem单位，calc()进行自适应布局
关于css中的单位大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

前端rem单位的使用研究

前端rem单位的使用研究相关推荐

最新文章

热门文章