rem、em、px的区别

px:像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
pt:是一个物理长度单位,指的是72分之一英寸。9pt=12px,可以依次换算。
em:相对长度单位,相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1em=16px。
rem:是CSS3新增的一个相对单位,可以理解为"root em",相对于根节点html的字体大小来计算的,chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1rem=16px。

分类至 JS/CSS
0条评论

禁止iPhone横屏时页面字体自动放大

也是在写博客程序的时候,用iPhone真机预览前端页面效果,发现横屏时,页面上某些标签的字体比竖屏时明显大好多,布局都有点乱了。
思考了一下,不对啊,我字体设置的是em单位,放大的话,应该所有元素都是等比例放大,偏偏正文特别大(p标签)。
不懂就要问,去搜索引擎上找答案。
最终在CSS里添加代码,问题得以解决:html { -webkit-text-size-adjust:100%; }
iPhone和Android的浏览器纵向和橫向模式皆有自动调整字体大小的功能,用CSS属性-webkit-text-size-adjust可以控制。

分类至 JS/CSS
2条评论

移动端H5页面屏蔽双击放大的功能

我写这套博客程序的时候,在iPhone手机safari上预览,快速双击页面任意位置,页面会被放大。被放大的程度,是刚好抵消主div框架设置的左右两边的margin。而我,不想要这样的功能!
在网上搜索,iPhone禁止页面双击放大,得到的答案大多是设置meta标签viewport:
content="width=device-width,initial-scale=1,user-scalable=no"
早几年前,上面这行代码还挺好用。而现在,随着iOS系统的更新升级,此方法已经不管用了。

分类至 JS/CSS
0条评论