css单位和rem布局

发表于

单位

绝对单位

  • px => 像素是一种绝对单位, 因为无论其他相关的设置怎么变化, 像素指定的值是不会变化的.

  • mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）

  • pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）

相对单位

  • em: 1em与当前元素的字体大小相同 ( 更具体地说，一个大写字母M的宽度)
  • ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
  • rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体 (即body上的font-size) 大小的尺寸；继承的字体大小将不起作用. 在旧版本的IE上不被支持
  • vw, vh: 分别是视口宽度的1/100和视口高度的1/100。

无单位的值

0 一般可以不带单位, 如: 

1
margin: 0;

无单位的行高, 相当于倍数

1
2
3
p {
  line-height: 1.5;
}

上满的p 行高为原来字体的1.5倍

百分比

对于宽高: 宽高是父元素的百分之几

对于字体: 新大小是相对于父容器的字体大小的百分之几

移动端rem布局

由上可知, rem是一个相对于整体字体大小的相对单位, 我们可以针对它这个特性来进行移动端的自适应布局. 比如:根元素大小设置为：font-size：200px；要显示一个div宽度为100px，可以写成——width:0.5rem。

所以我们可以根据设计图和实际屏幕尺寸设定font-size的大小, 在写css时换算成相应的em从而实现自适应.

假设我们的设计图大小为750px, 那么我们可以将根元素的font-size设为: 100 * (clientWidth / 750) + ‘px’, 这样每rem就相当于设计图的100px

可以直接使用[hotcss][https://github.com/imochen/hotcss] 来实现移动端的自适应

通过计算来决定一个CSS属性的值 calc()

CSS函数calc()可以用在任何一个需要、, 、

1
width: calc(100% - 80px);
  • 可以再计算中使用+ - * /
  • 可以混用单位
  • 可以嵌套使用: 一个 calc() 里面的 calc() 就仅仅相当于是一个括号。