单位px和em,rem的区别
px
相对长度单位。像素(Pixel)。
像素是相对于显示器屏幕分辨率而言的。例如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。(css手册3.0)
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 (css手册3.0)
google的默认字体高是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
rem
是css3新增的相对长度单位,相对于html根元素设置的文本尺寸单位。只需设置根元素尺寸,则内容所有字体可按比例调整大小。
对于需要适配各种移动设备,会使用rem长度单位,采用媒体查询方法获取分辨率设置html根元素大小。
/*移动端适配*/
@media screen and (min-width: 320px){
html{
font-size: 16px;
}
}
@media screen and (min-width: 360px){
html{
font-size: 18px;
}
}
@media screen and (min-width: 375px){
html{
font-size: 18.75px;
}
}
单位px和em,rem的区别的更多相关文章
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- [转]彻底弄懂css中单位px和em,rem的区别
难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...
- 网页布局设计css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px,em, rem的区别,在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
随机推荐
- 【python数据挖掘】使用词云分析来分析豆瓣影评数据
概述: 制作词云的步骤: 1.从文件中读取数据 2.根据数据追加在一个字符串里面,然后用jieba分词器将评论分开 3.设置WordCloud词云参数 4.保存最后的结果 数据:使用爬取的豆瓣影评数据 ...
- AI Web 2.0
kali: 192.168.0.103 目标机:192.168.0.105 0X01 扫描端口和目录 a)扫描端口 开启了80和22端口 b)扫描目录 看到两个敏感字样的目录 尝试访问/webadmi ...
- 个性化和云端孤岛困扰SaaS用户,低代码PaaS或成解决之道 ZT
近日,中国软件行业协会.中国软件网联合阿里云推出了<2020中国SaaS产业十大趋势>,其中明确指出企业软件SaaS化是大势所趋,但个性化和云端孤岛成为2020年SaaS用户关注的两大问题 ...
- NIO学习笔记,从Linux IO演化模型到Netty—— 从BIO到epoll模型
本文不涉及具体代码,只分析Linux IO演化的心路历程,学习资料来源网络,不保证一定正确,若有错误,欢迎指出. BIO 服务端创建socket(80端口),文件描述符3号. 当线程调用accept时 ...
- ES6之常用开发知识点:入门(一)
ES6介绍 ES6, 全称 ECMAScript 6.0 ,2015.06 发版. let 和 const命令 let命令 let 命令,用来声明变量.它的用法类似于var,区别在于var声明的变量全 ...
- JN_0016:查找端口占用
Windows查看端口占用 一. 查看所有进程占用的端口 在开始-运行-cmd,输入:netstat –ano 可以查看所有进程 二.查看占用指定端口的程序 当你在用tomcat发布程序时,经常会 ...
- c++多线程编程——初探
c++多线程并发可以帮助我们挖掘CPU的性能,在我们的思想中,似乎程序都是顺序执行的.这样的结论是建立在:程序是单线程程序.(比如我们平时写的hello world程序). 但是如果程序是多线程的.那 ...
- HDU5608
题意 英文 做法 设\(g(n)=n^2-3n+2\),有\(g(n)=\sum\limits_{d|n}f(d)\),反演一下有\(f(n)=\sum\limits_{d|n}\mu(\frac{n ...
- C语言 三目运算
C语言 三目运算 功能:为真后可根据条件选择成立两个不同的表达式 如果表达式1值为真选择表达式2 如果表达式1值为假选择表达式3 案例 #define _CRT_SECURE_NO_WARNINGS ...
- java使用JDBC连接hive(使用beeline与hiveserver2)
首先虚拟机上已经安装好hive. 下面是连接hive需要的操作. 一.配置. 1.查找虚拟机的ip 输入 ifconfig 2.配置文件 (1)配置hadoop目录下的core-site.xml和hd ...