J9国际集团|Home

135-2716-3909
网站建设资讯详细

网站前端□□制作之css长度单位

发表日期:2026-07-26 14:07:51   作者来源:郑燕云   浏览:2542   标签:网站前端制作    
关于长度☆单位,你还只是◢会使用px吗?让我们来◤看看如何▽使用长度□□□单位在页□□面自适应。
  • 长度单位分绝对长度单位和相对长度单位。
    • 绝对长度单位是一个固□□□定的值,它反应一□□□个真实的□□□□物理尺寸,绝对长度•单位视输○出介质而●定,不依赖于□□□□环境(显示器、分辨率、操作系统□□等)。
    • 相对长度单位,你看相对□□□□二字就可□□以看出其□□□□长度单位◇他会有一□□个参考值,会随着它□□□的参考值◢变化,是一种动□□□态的长度□□单位,更适合适□□□□配不同场□□景应用。
  • 常用的相对长度单位
  • px(像素)
像素是最□□常用的单□□位,很多长度□□单位最终□□□□都映射成□□像素,这是显示□□□□屏显示内□□□容的基本◎单位,显示效果□□□与显示分□□□□辨率有关
像素为影□□□□视显示的□□□基本单位,译自英文 pixel,pix 是英文单□□□□词 picture 的常用缩•写,加上英语◤单词 element 元素,就得到 pixel,故像素表□□□□示 “画像元素” 之意,有时又被□□□称为 pel (picture element)。
通常说的▼显示分辨□□□□率,其实是桌□□□□面设定的□□□分辨率(桌面分辨•率)而不是显○示屏最大□□□□可支持的□□分辨率(物理分辨□□率)。
列如有一□□□□个宽为 100px 的 div标签,在800x600分辨率下□□占显示面□□积的1/8,而在1980x1080分辨率下○则占据1/19,这也是为□□□□什么说它□□是动态的□□□主要原因。
简单来说,px会随着桌✦面分辨率□□□□的变大变□□□□小和改变,参考点就□□□□是桌面分□□□辨率,在不同桌□□面分辨率□□□□下会显示●出不同的□□效果。目前而已□□比较流行□□□的还是1920x1080桌面分辨□□□□率。
  • em(相对于父亲)
单位 em 的含义最▼初是指基●于当前字□□体大写字□□幕 M 的尺寸。现代浏览□□□□器中,1em 等于 16px。
基于当前元素的 font-size 大小,如果没设置就是继承父元素的 font-size。
如果作用于 font-size 时,1em 就等于父元素的 font-size。
em 单位具有级联关系。
em 会随着 font-size 的大小改变而改变。
  • rem (相对根元素)
相对于根元素(html)的 font-size 的计算值
默认情况·下:1rem=16px,这是因为▲浏览器的▲默认字体□□□□大小为 16px,且<html>标签的的○字体大小□□□□不会被轻□□□易修改。
  • %(百分比)
% 百分比对□□□□于 font-size,line-height 等属性,基于其父□□元素的 font-size 大小。而对于 text-indent、margin、padding、width等属性则□□□□是基于父□□□□元素的宽□□□度。
  • vw(viewpoint width ⇨ 视窗宽度)
CSS 中有一些□□□用于调整□□与视图(浏览器页•面)大小的单□□位,这些响应◆式设计对◈于设计在□□□□不同尺寸□□□屏幕下的□□网页有很▽大帮助。
一个单位是指视图宽度的 1%。
  • vh(viewpoint height ⇨ 视窗高度) 
一个单位是指视图高度的 1%。
如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.nzweibaum.com/news/6586.html