登录  /  注册

CSS长度单位详解_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:31:39
原创
1323人浏览过

序言

长度单位可以总体的分为绝对长度单位和相对长度单位。css中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率。本篇文章试图整理在前端开发中用到的css单位和其应用场景。

px——像素

px是pixel缩写,是基于像素的单位。在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。

pt——磅

pt就是point,是印刷行业常用单位,等于1/72英寸。pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸,是一个绝对长度单位。

em——相对父元素

em单位是指其正在使用的字体大小。在一个页面上给定一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

此处有一个关于【继承】的点需要注意:使用em设定宽高行高等属性的元素,其子元素继承的并不是em,而是其计算之后的值,这一点与使用百分号相同。而不添加单位,其子元素则继承的是百分比,子元素会根据其自身的字号计算得出对应属性值。具体看下面例子:

<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素内容  <div style="font-size:40px;background-color:red"> Web前端开发  </div></div>
登录后复制

当使用em时,最外层父元素的行高是1.5*16px=24px,同时其子元素继承了该line-height,效果图如下:

可以看出由于40px>24px,所以字体“溢出”了。而当不添加单位时:

<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素内容  <div style="font-size:40px;background-color:red"> Web前端开发  </div></div>
登录后复制

效果如下:

其行高会跟随自身字号进行计算,继承的只是“比例"。

rem——相对根元素

rem是指根元素(root element)的字体大小,它会随着父元素的字体大小变化而变化,减少了父子元素之间字体大小计算的复杂程度。由于根源素的默认字体大小是16px,为了方便计算,我们可以进行如下设置:

html{ font-size: 62.5%;      /*10&divide;16*/}h1{ line-height: 24px; line-height: 2.4rem;}
登录后复制

 
IE9+ 和现代浏览器都已经支持了。

rem非常适合做web app的开发,其在web app中的具体应用请参见:

web app变革之rem

萌の宇 – mobile H5布局大全-rem flexbox详解

Flexbox——快速布局神器_flexbox, CSS3, layout 教程_w3cplus

 

vw和vh——相对浏览器窗口

vh等于viewport高度的1/100。例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。当我们想设置跟随视口变化的字体,或是填满整个屏幕的div时,这个单位是非常有用的。

IE10+ 和现代浏览器都支持这两个单位。

vmin 和 vmax

vh和vm总是与视口的高度和宽度有关,与之不同的,vmin和vmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为1100px宽、700px高,1vmin会是7px,1vmax为11px。然而,如果宽度设置为800px,高度设置为1080px,1vmin将会等于8px而1vmax将会是10.8px。

IE10+ 和现代浏览器都已经支持vmin,webkit浏览器之前不支持vmax,现在已经支持,所有现代浏览器已经支持,但是IE全部不支持vmax。

ex 和 ch

ex和ch的单位长度,依赖于特殊字符:

  • ch 字符0的宽度
  • ex 小写字符x的高度
  • 当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。IE9+ 和现代浏览器都已经支持。

     

    参考:7 CSS Units You Might Not Know About

       你可能没注意到的CSS单位 

     

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号