css 单位之px , em , rem
px : Pixel像素单位。像素是相对显示器分辨率而言。
em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px)。
rem : 相对单位,可理解为 "root em" ,相对于根节点html的字体大小来计算,css3新加属性。如果没有重置,html默认font-size:16px。
也就是说,em是以自身父容器为参考对象的,而rem直接以HTML为参考对象的,所以rem更适合移动式开发。 em :
em是一个相对长度单位,是相当于当前对象内文本的字体尺寸,如果我们未设置当前文本的字体尺寸,那么em就会相当于浏览器的默认字体尺寸。
在浏览器中默认字体尺寸为16px,换句话说1em = 16px
rem : 除了rem是相对于根节点html,其他和em一样。 rem适配移动端原理:
var offWidth = window.screen.width / 25;
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';
这样一来,25rem 等于 移动设备的最大宽度
css 单位之px , em , rem的更多相关文章
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用
1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度 ...
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- px em rem 区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- 关于px em rem的一点小总结
2015-11-28 06:06:40 概念 都是CSS单位. px:像素 Pixel.像素 (计算机屏幕上的一个点) em:1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如,如果 ...
- 彻底弄懂px em rem
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px em rem区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
随机推荐
- 双向队列 SDUT 1466
题目描述 想想双向链表……双向队列的定义差不多,也就是说一个队列的队尾同时也是队首:两头都可以做出队,入队的操作.现在给你一系列的操作,请输出最后队列的状态:命令格式:LIN X X表示一 ...
- 关于Dijk采访的一些感想
有效的程序员不应该浪费很多时间用于程序调试,他们应该一开始就不要把故障引入! 反复,一遍又一遍的尝试,真的会让人心烦,对于有的问题解决不了,其实有很多原因,写出来的程序其实是非常考验人的细节处理能力的 ...
- pycharm-1
Python 1.4解释器(运行文件) 1.5注释:#单行,ctrl+/ 多行注释 ””” ””” 2.1变量 assert,except:lambda; nonlocal; 2.2数据类 ...
- 使用faker 生成测试数据
测试数据生成 faker基础使用 from faker import Faker f=Faker(locale='zh_CN') print(f.name()) address 地址 person 人 ...
- gulp常用插件之gulp-rev使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev这是一款为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css.根据静 ...
- 如果在vscode 中用运行快捷键(Ctrl+Alt+N)出现中文的乱码
在VSCODE中,运行代码的快捷方式是Ctrl+Alt+N,终止 代码运行的方式是Ctrl+Alt+M,但是有时候会出现汉字的乱码,这种情况并不是代码有问题,只要在terminal 中运行代码就可以了 ...
- 使用Office365账号配置SMTP中继服务器
· 如何将企业中的多功能设备(打印机.扫描仪等 )或应用程序设置为使用 Office 365 发送电子邮件,微软给出了3种方法: SMTP 客户端提交 直接发送 SMTP 中继 以上3种方式的介绍,大 ...
- js数据类型1
1. 分类(2大类) 基本(值)类型--5种 Number: 任意数值 String: 任意文本 Boolean: true/false undefined: undefined null: null ...
- php安装xdebug扩展,PHPStorm+XDebug单步调试
(一)php安装xdebug扩展,PHPStorm+XDebug单步调试 (二)PHPStorm配置XDebug (三)PHPStorm使用XDebug调试 (四)PhpStorm+Xdebug配置单 ...
- WPF DataGrid出现红框处理
当DataGrid属于单元格选中时出现红框,是因为WPF中DataGrid拥有默认的验证属性,如需关闭,请在DataGrid中加入以下属性: Validation.ErrorTemplate=&quo ...