px em rem %作为单位使用
博客地址 ：https://www.cnblogs.com/sandraryan/
px 我们都很熟悉啦，但是固定大小无法适配各种屏幕。
rem是CSS3新增的一个相对单位（root em，根em），还是相对单位，但相对的是HTML根元素。
rem有多方便呢，那就是通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
也就是根元素设置px值，其他子元素都设置rem值，设置了rem的元素大小会根据根元素的大小成比例缩放，如果需要修改整套页面的大小，仅修改根元素px就可以。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
margin:;
}
html {
font-size: 1px;
}
.p1 {
font-size: 5rem;
}
.p2 {
font-size: 10rem;
}
.p3 {
font-size: 15rem;
}
.p4 {
font-size: 20rem;
}
.p5 {
font-size: 25rem;
}
.p6 {
font-size: 30rem;
}
</style>
</head> <body>
<div>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<p class="p5">p5</p>
<p class="p6">p6</p>
</div>
</body> </html>
现在忽然改需求，说这字太小了，改。
然后，我萌就动手了
html {
font-size: 2px;
}
为了看出来效果，就没修改截图的比例~~~~~
em是相对长度单位。
em会继承父级元素的字体大小。如果没有设置，则是相对于浏览器的默认字体尺寸。
浏览器默认字体16px，1em=16px。
为了方便计算，一般在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
<p class="p4">父级10px，自己2em的p</p>
div {
font-size: 16px;
}
.p4 {
font-size: 2em;
}
尝试把父级字体设置为62.5%
<div class="div">
<p>父级62.5%，p为16em</p>
<p>16px</p>
</div>
.div {
font-size: 62.5%;
}
.div p:first-child {
font-size: 1.6em;
}
.div p:last-child {
font-size: 16px;
}
两个都是实际16px大小。
三个一起举（三）个例子 分别使用三个单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.p1 {
font-size: 16rem;
}
.p2 {
font-size: 16px;
}
.p3 {
font-size: 16em;
} </style>
</head>
<body>
<div>
<p class="p1">设置为16rem的p</p>
<p class="p2">设置为16px的p</p>
<p class="p3">设置为16em的p 父级没fontsize，相对于浏览器默认的16px</p>
</div>
</body>
</html>
显示成这样子
px em rem %作为单位使用的更多相关文章
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- px em rem 字体单位问题
px:相对长度单位,相对于屏幕分辨率 em:相对长度单位,相对于body而言 rem:相对长度单位,相对于html根元素 注意:浏览器默认大小:16px;
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- px em rem 区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- 彻底弄懂px em rem
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px em rem区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
随机推荐
- 【洛谷P2722 USACO】 总分 01背包模板
P2722 总分 Score Inflation 题目背景 学生在我们USACO的竞赛中的得分越多我们越高兴. 我们试着设计我们的竞赛以便人们能尽可能的多得分,这需要你的帮助 题目描述 我们可以从几个 ...
- Leetcode47. Permutations II全排列2
给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 在全排列1题目的基础上先排序,目的是把相同的 ...
- DesktopLayer.exe专杀
这两天发现电脑卡慢. 同事电脑发现病毒,而后装上杀软后(一直在裸奔~~~),发现自己电脑也存在. DesktopLayer.exe 会有以下几个行为: 第一,会在C:\Program Files (x ...
- 【Mobius绮丽的辗转】莫比乌斯反演
Problem 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 1≤n≤50000,1≤a≤b≤5 ...
- adb安装apk包时提示：device unauthorized
adb install apk时提示device unauthorized,手机上还没出现usb是否允许调试的询问弹框: 解决方法: 1.cmd输入:adb kill-server,点击回车键 2.c ...
- ORACLE常用的环境变量
ORACLE_HOME:将要安装oracle软件的目录,指向oracle二进制文件应该安装到的位置. ORACLE_BASE:主机服务器上用于oracle软件的顶级目录 ORACLE_SID:定义一个 ...
- Leetcode717.1-bit and 2-bit Characters1比特与2比特字符
有两种特殊字符.第一种字符可以用一比特0来表示.第二种字符可以用两比特(10 或 11)来表示. 现给一个由若干比特组成的字符串.问最后一个字符是否必定为一个一比特字符.给定的字符串总是由0结束. 示 ...
- MAC使用技巧之苹果电脑抓图截屏方法
用苹果电脑自带的截图功能的快捷键:command+shift+3 三个键按下则抓取/截取全屏 command+shift+4 然后用鼠标框选则抓取该区域的截图 command+shift+4 然后按空 ...
- Servlet小结（转载）
http://www.iteye.com/topic/766418 1 .首先,什么是Servlet? Servlet是一个Java编写的程序,此程序是在服务器端运行的,是按照Servl ...
- 【Java-加密算法】对称加密、非对称加密、单向散列（转）
一提到加密,就会联想到数字签名,这两个经常被混淆的概念到底是什么呢? 加密:加密是一种以密码方式发送信息的方法.只有拥有正确密钥的人才能解开这个信息的密码.对于其他人来说,这个信息看起来就像是一系列随 ...