关于rem的学习
2024-10-11 22:36:18
网页常见单位px、em、rem;其中rem是css3新出的单位,官网是这样定义的:“font size of the root element”,意思是:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。
网上搜索了一些关于px和rem有何区别的文章,大部分都是说rem在针对用户使用浏览器缩放的时候有较好的体验,而px会在浏览器缩放的时候破坏我们网页原有的布局。但是经过我自己的试验,发现并没有这个问题;也就是说如果只是针对浏览器缩放来说,用px和rem是没有什么区别的;
后来在这里看到了这样的一段文字 >>链接地址:http://ons.me/490.html 注:此段转载自西门的后花园
bug 1:例如reset里并没有设置网站文字字号,所以我会在body里直接写font-size:1.2rem,让整个网页字号为12px。但在Android的Chrome里无效,还是按照16px来计算而不是我手动设置10px计算。所以要想给整个网页设置默认字号,最粗暴的办法就是直接在body里设置em或者px字号,例如body{font-size:1.2em}或者12px,推荐em。body直接继承html的字号,可以间接实现rem的功能。然后其他地方用rem是没问题的。
bug 2:因为Chrome设置了最小字号为12px,导致如果在宽高、行高、边距等地方用rem,虽然在html那设置了10px,但默认还是会按照12px来计算,所以实际会偏大。建议rem只是在字号上用比较好。
到此,总算是弄明白了rem和px的不同之处
js动态计算rem值
/**
* [以iPhone6的设计稿为例js动态设置文档 rem 值]
* @param {[type]} doc [文档元素]
* @param {[type]} win [window]
* @return {[type]} [description]
*/
(function(doc, win) {
var docEl = doc.documentElement;
var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
var remcalc = function() {
var clientWidth = docEl.clientWidth;
var fontValue;
if (!clientWidth) return;
fontValue = ((62.5 * currClientWidth) / 375).toFixed(2);
fontValue = fontValue > 106.67 ? 106.67 : fontValue;
window.baseFontSize = fontValue;
docEl.style.fontSize = baseFontSize + 'px';
};
if (!docEl.addEventListener) return;
win.addEventListener(resizeEven, remcalc, false);
doc.addEventListener('DOMContentLoaded', remcalc, false);
})(document, window);
最新文章
- 如何使用github搭建个人博客
- 搭建Maven私服-续
- mysql时间格式化,按时间段查询MYSQL语句
- <;实训|第四天>;Linux下的vim你真的掌握了吗?附上ftp远程命令上传。
- 后台向前台传递entity的list然后构筑combobox的方法(easyui)
- struts2 request内幕 为什么在struts2用EL表达式可以取值
- Java实现Http服务器(四)
- android 一个页面内 多个listview的实现
- Android学习笔记(七)两个Fragment简单跳转示例
- Unity问答——NGUI怎么使用按键模拟鼠标点击?
- linq的一些用法总结
- Java_java多线程下载-断点下载-超详细
- hprose rpc使用实例(同时有Java和Delphi客户端的例子)
- 轻松搭建docker应用的mesos集群
- WPF学习随笔
- syncbackse操作
- Spring-Boot Banner
- python时间日期格式化和反格式化
- mysql inner jion多表查询
- NHibernate使用简单示例