• 周四. 8月 11th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

px,em,rem的区别(补充vh和vw的)

admin

11月 28, 2021

px、em、rem区别介绍 | 菜鸟教程 (runoob.com)

px像素:相对长度单位。相对于显示器屏幕的分辨率而言的。

    特点:IE无法调整使用px作为单位的字体大小

       国外大部分网站能够调整的原因在于使用了em或rem作为字体单位。

       Firefox能够调整px和rem,但是大部分中国网民还是使用IE内核

em:相对长度单位(大屏自适应可以使用到)。相对于当前对象内文本的字体尺寸(依赖父元素进行计算)。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(浏览器的默认字体高都是16px)。

    特点:em的值不是固定的。

       em会继承父级元素的字体大小

rem:新增的相对单位(root em,根em),

  和em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

p {font-size:14px; font-size:.875rem;}

!!!!!!

注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

px 与 rem 的选择?

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rem小数处理:如果一个元素尺寸是 0.625px,那么其渲染尺寸应该是 1px,空出的 0.375px 空间由其临近的元素填充;同样道理,如果一个元素尺寸是 0.375px,其渲染尺寸就应该是 0,但是其会占据临近元素 0.375px 的空间

  问题:background-image,经常因为小数像素导致背景图片被裁掉一部分。

  解决:1使用iconfont

     2如果需要background-image,尽量为背景图设置一定的空白间隙



补充:
  em设置根元素的字体大小,如果需要根据根元素改变的元素,大小长度单位需要用rem
  
html { font-size:0.75em; }
.panel { font-size:1rem;}

  vw:可视宽度的百分之一(1/100)vh:可视高度的百分之一(1/100)vh与vw也是用在可响应式布局当中,只作为单位。

  vmax和vmin,这两个单位的做用固定形状时用:固定正方形,不管可视宽度和高度如何变化,固定形状不变;最小宽度和最小高度都是按照百分比给的,会随可视窗体大小改变而改变,最大宽度和最大高度都是按照百分比给的,可视窗体变大会变大,窗体缩小到最小宽度是不会再缩小。(vmax:vw和vh中的最大值,vmin:vw和vh中的最小值)


  

发表评论

您的电子邮箱地址不会被公开。