集团旗下网站: 奇酷集团 | 迈领人才网 | 奇酷方舟
全国咨询热线:400-807-8991
您现在所在的位置:首页 >关于奇酷 > 行业动态 > UI设计CSS网页基本单位知多少?奇酷学院告诉你

UI设计CSS网页基本单位知多少?奇酷学院告诉你

来源:奇酷学院 发表于:

想要成为一名合格的前端工程师,会写页面绝对不能少,而如果想要页面写得出彩,你必须要知道一些网页常用的基本单位。

  想要成为一名合格的前端工程师,会写页面绝对不能少,而如果想要页面写得出彩,你必须要知道一些网页常用的基本单位。
 
  在传统的项目开发中,我们常常会用到px、%、em这几个单位,因为它能适用于大部分的项目开发,而且拥有比较良好的兼容性。但素,你造吗?从CSS3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem、vw、vh、vm等一些新的长度单位,我们可以用这些新的单位开发出比较良好的响应式页面,以此可以覆盖多种不同分辨率的设备,包括移动设备等。
 
  那么,接下来我们分别来分析下,这些常用到的单位分别是什么。
 
  1.px
 
  px就是pixel的缩写,像素,相对长度单位,像素是相对于显示器屏幕分辨率而言。比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。再比如,px就可以认为是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的。
 
  2.em
 
  相对长度单位,参考对象是父元素的font-size,具有继承的特点,如果当前行内文本的字体尺寸未被设置,浏览器使用默认字体尺寸(16px),整个页面内1em也不是一个固定的值。
 
  3.%
 
  一般宽泛的讲是相对于父元素,但是并不是绝对的。
 
  1)、对于普通元素就是我们理解的相对于父元素
 
  2)、对于position: absolute;的元素是相对于已定位的父元素
 
  3)、对于position: fixed;的元素是相对于ViewPort(可视窗口)
 
  4.rem
 
  rem是css3的新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
 
  例如:
 
  p{font-size:14px;?font-size:.875rem;}
 
   但是,需要注意的是:
 
  选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。一般rem用在移动端可能更多些。
 
  5.vw 
 
  vw是css3新单位,viewpoint width的缩写,即视口宽度。何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。视口宽度被均分为100单位的vw,1vw等于视窗宽度的1%。
 
  举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。
 
  6.vh
 
  与vw类似,vh就是可视窗口的高度了。视口高度被均分为100单位的vh,1vh就是高度的1%。看下图:
  7.vm
 
  vm也是css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。
 
  举个栗子:浏览器高度800px,宽度1000px,取最小的浏览器高度,1 vm = 800px/100 = 8 px。
 
  由于现在vm的兼容性较差,现在基本上很少有人用。
 
  除了上述7种单位,css还有哪些长度单位?
 
  例如:
 
  in  寸
 
  cm  厘米
 
  mm  毫米
 
  pt   point磅,大约1/72寸
 
  pc   pica派卡,大约6pt,1/6寸
 
  1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px