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. 国外的大部分网站能够调整的 ...
随机推荐
- js磁力线代码(非压缩,自己在压缩的版本上优化了代码,易于阅读)
拿去白嫖吧: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- exsi 6.7u2 不能向winows虚拟机发送ctrl+alt+del
1. 遇到过可以安装它的浏览器插件启动控制台登录就可以了. 2. 下载官方的客户机远程工具“VMware vSphere Client”才行. 3. 直接选择alt+del+insert 键盘即可代替 ...
- SQL Server误设置max server memory处理小结
昨天网上一网友说,由于他同事误将"max server memory"设置为10M后,SQL Server数据库登录不了,当时我简单测试了一下,今天有空就顺手将整个过程整理一下,记 ...
- qt creator源码全方面分析(1)
目录介绍 首先我们对软件源代码根目录下的各个重要文件(夹)做一个简单的介绍,对整体有一个大概的了解. 下面对目录及其内容做一个大概的初步的介绍,后面我尽量按照目录顺序进行依次介绍,当然可能会有一些交叉 ...
- #4864. [BeiJing 2017 Wc]神秘物质 [FHQ Treap]
这题其实挺简单的,有个东西可能稍微难维护了一点点.. \(merge\ x\ e\) 当前第 \(x\) 个原子和第 \(x+1\) 个原子合并,得到能量为 \(e\) 的新原子: \(insert\ ...
- Docker+Nginx+Tomcat实现负载均衡
环境检测: 1.Docker没有安装的小伙伴请查看https://www.cnblogs.com/niuniu0108/p/12372531.html 2.没有创建Nginx容器的小伙伴请查看http ...
- Git常用命令简记
创建仓库 添加需要版本控制的文件到仓库中 提交到版本库 修改位于顶端的commit的日志 分支管理 版本回退 切换与合并分支 本地版本库与远程关联 克隆 Tag的使用 问题与解决 创建git仓库 gi ...
- C#索引器学习笔记
本笔记摘抄自:https://www.cnblogs.com/ArmyShen/archive/2012/08/27/2659405.html,记录一下学习过程以备后续查用. 索引器允许类或者结构的实 ...
- day03_1spring3
事务管理的几种方式.spring整合Junit.spring整合web.ssh整合 一.事务管理的几种方式: 1.介绍前提我们需要导入:spring-tx-3.2.0.RELEASE.jar的包里面含 ...
- Server2012多用户远程桌面及问题解决记录
1.开启远程桌面 转载自 https://jingyan.baidu.com/article/c275f6ba9321fda33c756712.html 2.添加用户 转载自 https://jin ...