最近有很多读者朋友和朋友交朋友v%有疑问。有网友整理了相关内容,希望能回答你的疑惑。关于vivo手机,这个网站已经为你找到了问题的答案,希望对你有所帮助。
px:像素与显示屏分辨率(推荐使用)相比,相对于长度单位
em:相对长度单位基准点是父节点字体的大小,如果自己定义的话font-size按自己计算(浏览器默认字体为16px),整个页面内1em不是固定值。
rem:相对单位可理解为”root em”, 计算根节点html的字体大小,CSS3新加属性,chrome/firefox/IE9 支持。
vw:viewpoint width,视窗宽度,1vw等于1%的视窗宽度。
vh:viewpoint height,视窗高度,1vh等于1%的视窗高度。
vmin:vw和vh中较小的一个。
vmax:vw和vh中较大的一个。
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point,大约1/72寸
pc:pica,大约6pt,1/6寸
css单位可分为长度单位和绝对单位,如下表所示
CSS单位 |
|
相对长度单位 |
em、ex、ch、rem、vw、vh、vmin、vmax、% |
绝对长度单位 |
cm、mm、in、px、pt、pc |
1.px
px,表示像素,所谓的像素是显示在我们显示器上的小点,每个像素点的大小相同,所以像素被分为绝对长度单元。由于移动端中存在设备像素比,有些人会将px视为相对长度,px实际显示的大小是不确定的。由于移动端中存在设备像素比,有些人会将px视为相对长度,px实际显示的大小是不确定的。px之所以被认为是绝对单位,是因为px的大小与元素的其他属性无关。
<style> .box{ width: 200px; height: 200px; background-color: #ccc; }</style> <body> <div class="box"></div> </body>
2.em
em是相对长度单位。与当前对象中文本的字体尺寸相比。与当前对象中文本的字体尺寸相比。如当前行内文本的字体尺寸没有人为设置,则相对于浏览器的默认字体尺寸(1em=16px)。为了简化 font-size 我们需要在css中进行转换 body 选择器中的声明font-size=62.5%,这使得 em 值变为 16px*62.5%=10px。这样 12px=1.2em, 10px=1em, 也就是说,你只需要把你原来的东西拿走px 数值除以 10,然后换上 em作为单位就行了。
特点:
- em 值不是固定的
- em 将继承父级元素的字体大小
- em 是相对长度单位。与当前对象中文本的字体尺寸相比。例如,当前行内文本的字体尺寸尚未人为设置,与浏览器的默认字体尺寸相比
- 任何浏览器的默认字体都很高 16px
举个例子:
<div class="big"> 我是14px=1.4em<div class="small">我是12px=1.2em</div></div><style> html{font-size: 10px; }/* 公式16px*62.5%=10px */ .big{font-size: 1.4em}.small{font-size: 1.2em}</style>
这时候.big元素的font-size为14px,而.small元素的font-size为12px
3.rem
rem与根元素相比,我们在使用时可以在根元素上设置一个参考值,与em相比,可以减少很大的运算工作量,例如:html大小为10px,12rem就是120px
这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;它极大地帮助了视觉、使用和写作
html{font-size: 62.5%; }/* 公式16px*62.5%=10px */
在根标签font-size为 16px 下,1rem=16px ,80px=5rem
<style> html{ font-size: 16px; }.box1{ width: 5rem; height: 10rem; background-color: #ccc; }.box2{ width: 80px; height: 160px; background-color: #333; }</style><body> <div class="box1"></div> <div class="box2"></div></body>
特点:
- rem单位可以说集相对大小和绝对大小的优势于一体
- 与em不同的是,rem总是相对于根元素,与em不同,使用级联来计算尺寸
4.%
% 与父元素大小设定的比例相比,position:absolute;与已定位的父元素相比,position:fixed;相对可视窗口的元素
5.vm
vm相对于视口的宽度。视角均分为100个单位
h1{ font-size: 8vw;}
再举一个例子:浏览器宽度12000px, 1 vw=1200px/100=12 px
这里的窗户分为几种情况:
- 在桌面端,指浏览器的可视区
- 移动终端是指视觉布局
像vw、vh,比较容易混淆的单位是%,但是,与父元素相比,百分比是宽泛的:
- 普通定位元素是我们理解的父元素
- 对于position: absolute;与已定位的父元素相比,元素是相对的
- 对于position: fixed;元素是相对的 ViewPort(可视窗口)
6.vh
vm相对于视口的宽度。视角均分为100个单位
h1{ font-size: 8vh;}
再举一个例子:浏览器高900px, 1 vh=900px/100=9 px
总结:
1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1%。 2.vh:1vh等于视口高度的1%。
但是兼容性很差,不建议使用。目前px和px都很舒服。rem,
要么用vw,要么用vh, 两者不要混在一起,会有问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 10vw; height: 10vw; background-color: #ccc; margin: 5vw auto; }.box2{ width: 10vh; height: 10vh; background-color: pink; margin: 5vh auto; }</style></head><body> <div class="box1"></div> <div class="box2"></div></body></html>
vw适配 效果
vh适配效果
7、rpx
- rpx微信小程序是解决屏幕自适应的独特尺寸单元
- 可根据屏幕宽度自适应,无论屏幕大小,规定屏幕宽度为 750rpx
- 通过 rpx 设置元素和字体的大小,小程序可以在不同尺寸的屏幕下自动适应
rpx 和 px两者的区别:
- 在普通网页开发中,最常用的像素单位是px
- 在小程序开发中,推荐使用 rpx 开发这种响应像素单元
设计师在制作设计稿时,会制作两倍的图纸,也就是说,如果设计稿上有一个宽度和高度 200px 然后它最终画在页面上,实际上是一个宽高的盒子 100px 盒子,然后转换成盒子,然后转换成盒子 rpx 需要乘以 2 ,就又变成了 200rpx ,和设计稿上的数字一样,所以我们可以保持数字不变,直接把单位放在一边 px 替换成 rpx
em与px换算
任何浏览器默认字体高度16px(16像素)。所有未调整的浏览器都符合: 1em=16px。所有未调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-sizecss中body选择器中需要声明的转换font-size=62.5%,使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说,你只需要把原来的px值除以10,然后换成em作为单位。
移动屏幕为750px
那么: 100vw=750px
所以1vw就等于:1vw=750px/100vw=7.5px
注意现在1vw等于 7.5px,而我们的1rem是16px (默认情况下 根元素字体大小为16px)
现在进行计算:1rem=16px/7.5px=2.133vw
相反:1vw=7.5px/16px=0.469rem
上面的计算公式计算同样也可以逆向思考下: 同理,移动端屏幕大小为750px
我们计算1px等于多少vw: 1px=100/750=0.1333vw
显示1px=0.1333vw
现在进行计算:1rem=0.1333 * 16=2.133vw
常见问题:
1、假如使用em来设置文字大小要注意什么?
注意父元素的字体大小,因为em是根据父元素的大小来设置的。
比如同样是1.5em,要是父元素是20,那1.5em就是30px.要是父元素是30px,1.5em就是45px(特别是在多重div嵌套里面更要注意)
2、pc pt ch一般用在什么场景?
这些我们网页设计基本上用不到,在排版上会有用处
3、如何使 1rem=10px?
在设置HTML{font-size:62.5%;}即可
4、如果父元素没有指定高度,那么子元素的百分比的高度是多少?
会按照子元素的实际高度,设置百分比则没有效果
总结
「px」
绝对长度单位,来描述一个元素的宽高以及定位信息
「em」:
相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认16px)em作为字体单位,相对于父元素字体大小;em作为行高单位时,相对于自身字体大小,整个页面内 1em 不是一个固定的值。
「rem」:
相对单位,可理解为”root em”,相对根节点html的字体大小来计算,CSS3新加属性,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。rem布局的本质是等比缩放,一般是基于宽度,试想一下如果UE图能够等比缩放,那该多么美好啊
「vh、vw」:
viewpoint width / viewpoint height,vw 相对于视窗的宽度,vh 相对于视窗的高度,1vw等于视窗宽度的1%
主要用于页面视口大小布局,在页面布局上更加方便简单
对于视口的宽度或高度中较小的那个,使用方法和vh\vm类似
「百分比」:
1% 对不同属性有不同的含义。 font-size: 200% 和font-size: 2em 一样,表示字体大小是默认(继承自父亲)字体大小的2倍。 line-height: 200% 表示行高是自己字体大小的 2 倍。 width: 100%表示自己 content 的宽度等于父亲 content 宽度的1倍。
主题测试文章,只做测试使用。发布者:艾迪号,转转请注明出处:https://www.cqaedi.cn/baike/48711.html