轻松掌握CSS3中的字体大小单位rem的使用方法


Posted in HTML / CSS onMay 24, 2016

CSS3中新的字体单位rem
前段时间无意中在wordpress主题中接触到一种字体单位rem,当时我就很好奇,毕竟以前没有见过,于是我马上查找资料,并测试了一回.

众所周知在web中有很多字体单位(font-size)较常见的有em,px,让我们对比一下这两种单位:

px是绝对值,准确而稳定.但是它的改变会影响页面布局.
em是相对值,它以父元素的大小为基准单位,来计算大小.所以很难把握.
考虑到这么多字体单位的优缺点,在CSS3中rem诞生了.rem也是相对单位(rem=root em)很明显rem是由em变化而来,或者说rem是em的升级版,具体来历.我们就不要去追究了,从字体表面上看,它就是这么回事.

root em,就是相对于根目录的em而不是相对于父元素,也就是说,它虽然是绝对值,但是只是相对于根目录来说也就是html,它不会随着其它元素的改变而改变.也就是说,我们只要设定html的文字大小就可以了.而不用考虑其它因素.

而且他还具有非常好的支持Chrome,Firefox,Safari,Opera,IE9+.IE6,7,8就只能使用px或者em了.

XML/HTML Code复制内容到剪贴板
  1. html{      
  2.     font-size:62.5%;      
  3. }  

为什么要这么设置呢?因为网页上的字体默认是16px,而16px的62.5%就是10px;也就是说这样的活1rem就等于10px,这个对于我们来说是非常棒的,font-size:1.2rem,当然为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面.

在这里我要提到一点的就是,假如你要是用rem来设置行高,边距之类的单位.请在html中加入这么一句话:-webkit-text-size-adjust:none;来消除webkit的默认属性.否则在其它的地方rem不是以根目录作为基准值了.

canvas无法使用rem单位的解决方案
我们在使用canvas时需要设置画布的大小,即设置canvas标签的width,height属性。

XML/HTML Code复制内容到剪贴板
  1. <canvas width="200px" height="200px"></canvas>  

在移动端,画布的大小要根据屏幕的大小进行适配,我们一般采用rem结合媒体查询的方式。使用canvas时就遇到遇到一些问题:

canvas的width属性不支持rem单位(如果使用样式当然支持rem,但注意canvas的width属性与style中的width是有区别的),如下

CSS Code复制内容到剪贴板
  1. <canvas width="2.5rem" height="2.5rem"></canvas>  

translate方法传参是坐标位置,不带单位,如ctx.translate(10,10);
适配屏幕是必须的,但如何解决?用最原始的百分比布局就可以:

JavaScript Code复制内容到剪贴板
  1. //获取屏幕的宽度   
  2. var  clientWidth = document.documentElement.clientWidth;   
  3. //根据设计图中的canvas画布的占比进行设置   
  4. var canvasWidth = Math.floor(clientWidth*200/720);   
  5. canvas.setAttribute('width',canvasWidth+'px');   
  6. canvas.setAttribute('height',canvasWidth+'px');   
  7. //translate方法也可以直接传入像素点坐标  
HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 #HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 #HTML / CSS
css 元素选择器的简单实例
May 23 #HTML / CSS
css sprite简单实例
May 23 #HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 #HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 #HTML / CSS
You might like
写一个用户在线显示的程序
2006/10/09 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python计算文本文件行数的方法
2015/07/06 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
工程总经理工作职责
2013/12/09 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
python脚本框架webpy模板控制结构
2021/11/20 Python