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. 国外的大部分网站能够调整的 ...
随机推荐
- JAVA类变量、类方法
类变量(static) 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. public class C { ...
- 论文-MobileNet-V1、ShuffleNet-V1、MobileNet-V2、ShuffleNet-V2、MobileNet-V3
1.结构对比 1)MobileNet-V1 2)ShuffleNet-V1 3)MobileNet-V2 4)ShuffleNet-V2
- HashMap初始化容量过程
集合是Java开发日常开发中经常会使用到的,而作为一种典型的K-V结构的数据结构,HashMap对于Java开发者一定不陌生.在日常开发中,我们经常会像如下方式以下创建一个HashMap: Map&l ...
- QFile文件读写
参考代码 .h文件 #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> #include <QFile> #inc ...
- JN_0012:win10的开机启动文件夹
1,登录所有用户时都能开机启动的启动文件夹.所有用户通用的开机启动文件夹地址是 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp ...
- 《80x86汇编语言程序设计教程》第二章课后题答案
2.5 习题 2.1 数据寄存器 1. 八个通用寄存器除了各自规定的专门用途外,它们均可以用于传送和暂存数据,可以保存算术逻辑运算中的各种操作数和运算结果. 2.1 AX和Al寄存器又称为累加器(ac ...
- 图片选择并使用base64展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- processing data
获取有效数据 Scikit-learn will not accept categorical features by default API里面不知使用默认的特征变量名,因此需要编码 这里我还是有疑 ...
- Navicat 安装+连接
Navicat安装包: 链接:https://pan.baidu.com/s/1bvKagRJ0w_7LH0t4597ycA 提取码:yftv 如MySQL 8.0+ 安装成功后,教程见本博 可用Na ...
- bootstrap-table中时间戳转换为日期格式。
{ field: 'createdTime', title: '创建时间', formatter: function (value, row, index) { return changeDateFo ...