前端不同尺寸单位的区别和使用

发布时间:7个月前 来源:94开发网原创 作者:超级管理员 热度:114℃
前端常见的尺寸单位常见单位有:px、rpx、em、rem、%、vw、vh、vm,xpx是像素单位,是指设备或图片中最小的一个点,它是一种相对长度,是相对于显示器屏幕分辨率而言的。通常情况下在pc端,css的px就接近于实际像素大小,但是在移动设备上,根据不同机型的分辨率大小,css中的一个px可能就会对应不同数量的物理像素点。

前言

  一直搞不懂pc端、移动端、小程序、不同设备适配 要使用不同的单位表示不理解,今天,我就磕到底整明白它!

前端常见的尺寸单位

  常见单位有:px、rpx、em、rem、%、vw、vh、vm

一、px

  px是像素单位,是指设备或图片中最小的一个点,它是一种相对长度,是相对于显示器屏幕分辨率而言的。不同的设备在大小宽高相同时,它们的物理像素大小也可能是不同的,物理像素越高的设备单位面积内存放的像素点就高,因此画面看起来更精细。通常情况下在pc端,css的px就接近于实际像素大小,但是在移动设备上,根据不同机型的分辨率大小,css中的一个px可能就会对应不同数量的物理像素点。

  特点:网页设计的常用单位,也是基本单位,用px可以固定设置布局或元素的大小。

  缺点:没有弹性,大小死板,使用多端的页面上时,无法做到适应效果,如果从pc端切向移动端时样式会乱掉,纯pc端不会出现这样的问题。

二、%

  %百分比 顾名思义百分比的单位

  %一般是相对于父元素为基础的,如给一个元素margin-left为百分比,它会去寻找该元素的父元素以百分比形式计算,但也有几点例外,如:

  对于position:absolute就是相对于已经定位的父亲

  对于position:fixed就是对于ViewPort(视图)

  对于transform2D水平移动变化来说就是相对于自身

三、vh

  vh是css3新增单位view height的缩写

  vh指的是视图高度,vh类似于一种百分比的单位,他相对于视图的高度,将视图的高度分为100份,10vh也就是占用视图的10%

  举例:900px高度的视窗 1vh=9px

前端不同尺寸单位的区别和使用

四、vw

  vw是css3新增单位view width的缩写,vw指的是视图宽度,和vh类似

五、vm

  vm是css3新增单位,vm是在视图中选取 宽度和高度最小的那一个,然后像vw、vh一样将其分为100等份

  举例:1200px宽 900px高 的视图就是 1vm=9px

六、em

  em相对长度单位

  em是相对于字体大小来计算的一个尺寸,他是字体大小的倍数、如em相对的字体大小为16px,那么1rem = 16px

  使用em单位的元素如果自身设置了字体大小,那么就相对于自身计算,如果自身没有设置字体大小那么就会继承父元素的字体大小,如果父元素没有设置,就会依次向上寻找(因为字体大小是会被继承的),如果页面中没有设置字体大小,那么就会以浏览器的默认字体大小16px为基准

七、rem

  rem css3新增相对长度单位

  rem和em类似都是相对长度单位,但是rem只会相对于html根元素的字体大小,也就是说如果根元素字体设置为18px,那么全局内rem的值换算都为1rem = 18px

  补充:

  rem在制作响应式页面中经常使用到,因为我们可以根据不同的设备尺寸,去动态的调整根元素的大小,使用rem单位达到适配不同尺寸设备的效果,有些自适应的页面框架单位上的使用就是基于此种特性

  有时我们为了换算方便会将根元素的字体大小先设置为62.5%,然后根据需要进行调整,原因是62.5%*16px = 10px,此时也就是1rem = 10px

八、 rpx(upx)

  rpx 响应式px单位

  由小程序最先提出的响应式px单位,为了解决px在移动端上不同的机型极容易出现的变形问题

  以uniapp对rpx的实现为例子:

  uniapp规定屏幕的基准宽度为750rpx,开发者可以自己通过设计稿的基准宽度来计算页面的rpx值具体等于多少px

  公式如下:

  

设计稿 1px / 设计稿基准宽度 = 框架样式1rpx / 750 rpx

  也就是说 使用rpx单位元素的大小的计算公式为

  

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx

  若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx

注意:

  rpx本质上是和宽度相关的单位,屏幕越宽实际像素值就越大,这是根据屏幕宽度缩放的单位,如果你不想根据屏幕缩放,那么不要使用rpx

  如果你的字体使用了rpx就需要注意了,你的字体也会跟着屏幕的宽度变化而变化

  rpx不支持切换横竖屏时进行计算大小,因此如果你使用了rpx,建议锁定屏幕方向

  设计师可以用iPhone6作为视觉标准

  如果设计师的基础设计稿宽度不是750,每次我们手动计算就很麻烦,此时就可以开启upx配置,具体说明uniapp官网有解释,这里简单说明一下, upx是uniapp推出的单位,他可以和px进行等比转化,也就是说用户可以配置1px在uniapp编译时转化为1upx,但是upx是根据用户传入的基础设计图的尺寸向rpx转化的,也就是说用户不必再去计算如果设计稿不为750px,页面上元素应该计算为多少rpx了,开启upx转化后用户直接书写px,uniapp会直接将px转化为计算后的rpx


文章链接:https://www.94kaifa.com/bc/10087.html

文章标题:前端不同尺寸单位的区别和使用

文章版权:94KAIFA(www.94kaifa.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

本文最后更新发布于 2023-08-31 14:34:21 ,某些文章具有时效性,若有错误或已失效,请联系客服处理:75109479@qq.com

关于我们
本站上线于2023年09月01日,专注PbootCMS模板制作及整合,提供优质的企业网站模板、建站技术教程、网页素材、网站源码下载,更有仿站开发、网站维护等业务。做中小站长企业快速建站好帮手。
站长QQ:532088631
微信群聊
微信群聊
联系方式
技术交流QQ群号201010290
电话:400-0707-327
邮箱:kefu@kaifacn.com
坐标:西安市雁塔区高新路6号
陕ICP备2020015383号 陕公网安备61019002001930号

Copyright © 2023 94KAIFA All Rights Reserved.本站采用创作共用版权 CC 4.0 BY-SA 许可协议