css 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或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）。
以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。
1，假设设计稿 页面宽度是750px,那么定义1rem=100px, 750px=7.5rem.
然后如下 计算出html的font-size值。
<script type="text/javascript">
init();
window.onresize = init;
function init(){
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + 'px';
}
</script>
2，页面某个元素宽12px，那么可写为0.12rem,实际值 浏览器会用0.12乘以html的font-size换算为实际的px值
最新文章
- 浅入tomcat
- 在CentOS 6.5上安装python2.7
- Spring学习笔记—Spring之旅
- 《day10》
- 从浅到深掌握Oracle的锁
- 为C# Windows服务添加安装程序
- Qt4.8.6+mingw+Qgis2.4.0基于QGis的二次开发
- [LeetCode 119] - 杨辉三角形II(Pascal's Triangle II)
- byte数组如何转为short数组 (转)
- java编程之泛型
- lambda表达式不使用委托(delegate) 用FUNC
- linux CentOS 安装 nginx
- 部署 HTTPS 访问 ( https:// )
- 学习java的第4天 (2019-03-21 11:49）
- (转)C#读取MAC的几种方法
- 静态方法@staticmethod
- HTML 【表单】
- linux访问Windows共享文件命令
- mysql 分片
- C/C++ -- Gui编程 -- Qt库的使用 -- QtWidget