css中em,rem的解析成px的原理及混用场景
来源:互联网 发布:淘宝返利平台是真的吗 编辑:程序博客网 时间:2024/06/06 01:41
em 单位如何转换为像素值:
所得的像素值=当前元素的font-size*em值
例如,如果一个div有18px字体大小,10em将等同于180px,即10 × 18 = 180。
CSS设置padding为10em
浏览器解析出来的值为180px(或接近它)
rem 单位如何转换为像素值
取决于页根元素的字体大小,即html元素的字体大小
所得的像素值=根元素html font-size(默认是16)*rem值例如,根元素的字体大小16px,10rem将等同于160px,即10 x 16 = 160。
注意:如果em所在换的元素没有字体大小的设置,则是浏览器默认的16像素(当然,这个值可以被浏览器自己所改变)
使用场景
一般来说,你需要使用em单位适用于在非默认字体大小的元素上的padding、margin、width、height和line-height等值,不建议用em来控制字体大小,一般使用rem单位的字体大小,使用rem单位创建统一可扩展的设计,媒体查询也应该是rem单位
0 0
- css中em,rem的解析成px的原理及混用场景
- CSS中rem em px的区别
- CSS的px,em,rem
- 谈谈css中px , em,及rem
- css中单位px、pt、em和rem的区别
- css中单位px和em,rem的区别
- css中单位px和em,rem的区别
- css中单位px和em,rem的区别
- CSS 中 px,em和rem 的区别 学习笔记
- css中单位px、em以及rem的区别
- css中单位px和em,rem的区别
- css中单位px、pt、em和rem的区别
- css中px和em,rem的区别
- css中px,em,rem,pt的区别
- css中单位px和em,rem的区别
- CSS 中单位px和em,rem的区别
- css中单位px和em,rem的区别
- css中px,em和rem的区别要弄清楚
- FastXML Jackson / JSON 学习记录
- Chromium的JavaScript对象扩展
- 《DLL for Win32/MFC》Part 1, The Win32 DLL Object
- 记Selenium HTMLTestRunner 无法生成测试报告的总结
- Leetcode:119. Pascal's Triangle II(JAVA)
- css中em,rem的解析成px的原理及混用场景
- Spring整合Junit4
- MultipartFile 转 File
- 解决putty上vim小键盘不好使的问题
- 桌面widget详解(一)——基本demo构建
- Ubuntu10.10 32位系统下moses统计机器翻译系统使用命令记录
- 初探 属性的copy、strong
- 【bzoj1610】[Usaco2008 Feb]Line连线游戏 计算几何基础
- MFC图像控件的鼠标消息响应函数