网站建设资讯

NEWS

网站建设资讯

css长度单位em,px,rem分别有什么用-创新互联

这篇文章主要介绍css长度单位em,px,rem分别有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

我们提供的服务有:成都网站制作、网站设计、外贸网站建设、微信公众号开发、网站优化、网站认证、石楼ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的石楼网站制作公司

一、使用em或px来设置字体的大小

CSS从排版里继承了单位pt(point)和pc(pica)。 传统打印机上使用,并优先于类似的单位cm或 in。在CSS中有理由不使用单位pt,可以使用你喜欢的任何单位。 我们一个很好的理由使用既不pt也没有任何其他绝对单位(),那就是使用em和px。

这里有几行不同的厚度。 它们中的一些或全部可能看起来很清晰,但至少1px和2px线应该清晰可见:

css长度单位em,px,rem分别有什么用

如果前四行看起来都相同(或者如果缺少0.5pt线),你可能正在计算机显示器上查看无法显示小于1px的点。 如果线条的厚度增加,你可能会在高质量的计算机屏幕或纸张上查看此页面。 如果1pt看起来比1.5px厚,你可能有一个手持屏幕。

CSS的神奇单位:px,通常是一个很好的单位,特别是如果样式需要文本与图像对齐,或者只是因为1px宽或1px的倍数保证看起来很清晰。

但对于字体大小,它甚至更好用em。这个想法是(1)不设置BODY元素的字体大小(用HTML格式),而是使用设备的默认大小,因为这是读者可以舒适阅读的大小; (2)表示其他元素的字体大小em:H1 {font-size: 2.5em}使H1为普通正文字体的2½倍。

在这里你可以使用的唯一的地方pt(或cm或in)用于设置字体大小是在样式表打印,如果你需要确保印刷字体是完全具有一定规模。但即使使用默认字体大小通常更好。

因为,px单位可以防止你知道设备的分辨率。 无论输出是96dpi,100dpi,220dpi还是1800dpi,它都整数px长度来表示,总是看起来很好并且在所有设备上非常相似。 但是,如果你想知道设备的分辨率,例如,知道使用0.5px线是否安全,该怎么办? 答案是通过媒体查询检查分辨率。 解释媒体查询超出了本文的范围,但这是一个小例子:

div.mybox {
   border:2px solid;
}
@media(min-resolution:2dppx){
  / *每px有2个或更多点的介质* /
  div.mybox {
     border:1.5px solid;
  }
}

二、css的新增单位:rem


为了更容易编写仅依赖于默认字体大小的样式规则,CSS自2013年起就有了一个新的单位:rem。 rem(对于“root em”)是文档根元素的字体大小。与em元素的区别在于,rem在整个文档中是不变的。 例如,为p和h2元素提供相同的左边距,比较2013年之前的样式表:

p {margin-left:1em}
h2 {font-size:3em; margin-left:0.333em}

新版本:

p {margin-left:1rem}
h2 {font-size:3em; margin-left:1rem}

css还有其他一些新单位,可以指定相对于阅读器窗口的大小,这就是vw和vh。vw是窗口宽度的1/100,vh是窗口高度的1/100。还有vmin,代表vw和vh中最小的。vmax,代表vw和vh中大的。

因为它们是如此新颖,它们还没有办法在任何地方使用。但是,截至2015年初,一些浏览器已经可以支持它们了。

以上是“css长度单位em,px,rem分别有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:css长度单位em,px,rem分别有什么用-创新互联
分享网址:http://njwzjz.com/article/disghj.html