css单位 % em rem vw vh vmin vmax pt ch ex

px

像素 (计算机屏幕上的一个点),项目开发中特别是移动端开发我经常会使用webpack将px转化为rem来适应屏幕宽度

%

百分比,理解为和父元素字符的相对大小,但是有几个注意点:
1. 对于普通元素,相对于父元素大小
2. 对于position: absolute元素,相对于已经定位的父元素(position: relative
3. 对于position: fixed,相对于浏览器的viewport

em

相对于使用em单位的元素的字体大小。

很多人误解为相对父元素字体大小,这纯粹是因为字体属性继承的特性

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10,然后换上em作为单位就行了。

所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

缺点:

虽然em相对于纯手写px灵活性和可配置性提高很多,但是使用起来也比较混乱,因为em依赖自身font-size,而font-size具有继承特性,实际项目开发中,不同层级的div和模块字体要求大不相同,如果统一使用em作为单位,很容易造成修改一个元素的font-size然后造成所有子元素的尺寸和字体的变化,除非手写每一个元素的font-size,但是这样也非常麻烦,因为这样就失去了字体继承的意义

rem

所以就出现了rem, 集相对绝对优点于一身

css3新特性,相对于根元素html的字体大小,这样使用起来就安全多了,避免字体大小逐层复合的连锁反应,而且可以通过控制根元素字体大小来控制全局的尺寸大小缩放。

vw vh

  • vw —代表视窗(Viewport)的宽度,和%用法相似
  • vh —代表视窗(Viewport)的高度

vw和vh会随着viewport变化自动变化,再也不用js控制全屏神马的了

你可以在任何一个可以使用像素值的地方使用它们,比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

于是,我们可以想到这可以用来:

  • 一些元素的全屏,比如原来使用html,body 100% 来达到子元素继承目的来达到全屏的目的,还有弹出框的遮罩层一般使用fixed来全屏,现在统统可以用优雅的vh和vw来自适应全屏

  • 全屏元素中的垂直居中,比如弹出框原来可以用position + tansform来达到目的,现在也可以使用vw和vh来垂直居中

#rectangle{ 
    width: 60vw;
    height: 60vh;
    margin: 20vh auto; }
  • 字体自适应屏幕大小
  • 栅格布局

vmin vmax

  • vmin —当前vw和vh中较小的值
  • vmax —当前vw和vh中较大的值

其实都是一些利用viewport尺寸的伎俩

ch ex

这两个单位根据 当前font-family 的相对单位

  • ch 字符0的宽度
  • ex 小写字符x的高度

当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样

pt

point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用

你可能感兴趣的:(css,css,单位,em,rem,vw)