css中rem单位
类别:Web前端 浏览量:883
时间:2016-11-27 css中rem单位
css中rem单位一、字体各单位之间的对应关系
二、css中rem单位的认识
1、rem是CSS3新增的一个相对单位
2、css中rem是个相对长度单位。rem是一个相对大小的值,它相对于根元素<html>。
3、比如,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px),然后其他的字体就是将你要的值除以14得到的值。
4、上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了。
三、rem与em区别
1、使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
2、通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
3、对于不支持rem的浏览器,应对方法是多写一个绝对单位的声明,这些浏览器会忽略用rem设定的字体大小。
例如: p {font-size:14px; font-size:.875rem;}
四、css中rem实例
html {
font-size: 62.5%;
/*10 &liide; 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}
说明:
在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
标签:css
您可能感兴趣
- border和background区别(css中background-origin属性的使用解析)
- html支付功能怎么实现(Div+CSS仿支付宝登录页面)
- web前端快速入门之html(Web前端开发规范2017HTML/JavaScript/CSS)
- css3渐变样式怎么用(CSS3 background-image颜色渐变的实现代码)
- css制作旋转小球(css实现毛毛虫爬行动作)
- css动画的性能(你所不知道的 CSS 动画技巧与细节)
- css布局图解(浅谈CSS三栏布局的N种实现)
- css3边框和边界图片(css3 box-shadow阴影外阴影与外发光图示讲解)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- css3特性动画图(CSS3+DIV实现漂亮的动画彩色标签)
- 怎么用css设计边框(单元素利用css实现多重边框效果示例代码)
- css3弹出动画效果(CSS3实现跳动的动画效果)
- css自动换行左右对齐(CSS自动换行、强制不换行、强制断行、超出显示省略号)
- css3语法结构(CSS3中的注音对齐属性ruby-align用法指南)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
- ()
热门推荐
- python使用门算法加密文件(python实现栅栏加解密 支持密钥加密)
- mysql批量生成uuid(一种简单的ID生成策略: Mysql表生成全局唯一ID的实现)
- 阿里云ecs怎么配置环境(阿里云ECS实例中运行网站常见状态码的报错分析)
- 宝塔面板网站搭建没锁定文件(宝塔面板曝出严重安全漏洞!站长需赶紧升级到最新版本)
- myisam和innodb的区别
- docker-compose启动单个容器(docker-compose快速搭建docker私有仓库的步骤)
- 护卫神主机大师使用教程(护卫神主机大师软件窗口显示不全的解决办法)
- myisam和innodb的区别
- laravel 数据库实现原理(laravel 数据迁移与 Eloquent ORM的实现方法)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9