轻松掌握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 相关文章推荐
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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
php检测图片木马多进制编程实践
2013/04/11 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
部队领导证婚词
2014/01/12 职场文书
手工社团活动方案
2014/02/17 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
王老吉广告词
2014/03/20 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
爱护公物主题班会
2015/08/17 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Golang获取List列表元素的四种方式
2022/04/20 Golang