v%(vivo手机)

最近有很多读者朋友和朋友交朋友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>

v%(vivo手机)

特点:

    1. rem单位可以说集相对大小和绝对大小的优势于一体
    2. 与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适配 效果

v%(vivo手机)

vh适配效果

v%(vivo手机)

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年 2月 3日 上午11:37
下一篇 2023年 2月 3日 下午12:13

相关推荐

  • 苹果耳机降噪怎么设置,苹果耳机降噪设置?

    苹果耳机降噪设置? 苹果耳机降噪的设置方法如下 苹果耳机(AirPods Pro)的降噪模式可以在iPhone的控制中心里面设置。 在手机上打开【控制中心】界面后长按AirPods Pro的音量控制条,在弹出的选项中点击【噪音控制】按钮,根据需要点击选择【降噪】、【关闭】、【通透模式】即可 苹果耳机降噪模式怎么切换? 苹果耳机降噪模式切换方法如下: 1耳机感…

    百科大全 2023年 7月 28日
    00
  • 登飞来峰的思想感情(登飞来峰的思想感情和生活哲理)

    最近有很多读者朋友对登飞来峰的思想感情有疑问。由部分网友整理出相关内容希望能够解答你的疑惑,关于登飞来峰的思想感情和生活哲理,本站也已经为你找到了问题的答案,希望能帮助到你。 王安石与苏轼同列“唐宋八大家”。王安石比苏东坡年长十六岁,因为苏轼的父亲荀洵的关系,二人在政坛上处于敌对状态。 然而在“乌台诗案”之时,王安石却不忍“盛士杀才士”,不计前嫌地营救苏轼。…

    百科大全 2023年 4月 8日
    00
  • 华侨大学是双一流吗(华侨大学是双一流吗-)

    最近有很多读者朋友对华侨大学是双一流有疑问。有网友整理了相关内容,希望能回答你的疑惑。华侨大学是双一流吗?,这个网站也为你找到了问题的答案,希望对你有所帮助。 2021年3月25日,ESI基础科学指标数据库公布最新统计结果,华侨大学计算机科学学科进入ESI世界前1%。到目前为止,学校已经有工程、化学、材料科学和计算机科学四个学科进入ESI世界前1%,其中工程…

    百科大全 2023年 2月 25日
    00
  • 东莞中学排名2021最新排名(东莞中学排行榜2020)

    广东百强中学排行榜如下图所示,图片来源网络仅供大家参考。 从图片上的内容我们可以看出广东百强中学排行榜有哪些,以及他们的得分情况,属于哪个城市。 深圳中学在广东百强中学排行榜中排名第一名,综合得分19.13分,相较于上期进步了两位。深圳的经济实力非常强,有强大的财政做支撑,教育发展的如火如荼,据说很多黄冈中学的优秀师资都被深圳的中学挖墙脚了。 华南师范大学附…

    2023年 4月 27日
    00
  • 充电线三个种类怎么叫(充电线有哪三种型号)

    随着电子产品种类的不断增加,我相信我的朋友家里有很多充电线,这些线的接口也不同。看着这些设备的接口,很多人都叫不出名字。每根电线的传输速度、充电速度和功能也各不相同。像USB Type-A、Type-B、Type-C,USB 2.0、USB 3.2、Lightning等等。今天我们就来了解一下这些生活中很常见,又傻又不清楚的线材。 什么是USB? USB线材…

    2023年 4月 30日
    00

站长QQ

7401002

在线咨询: QQ交谈

邮件:7401002@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信