跳到主要内容

单位, 类型, 变量

数字类型​

  • integer;
  • number;
  • dimension: 数字 + 单位;
12
1.1
12px      12 pixels
1.2pt     1.2 points

长度类型​

绝对长度​

  • px;

相对长度​

percentage 类型​

  • 百分比: %;

em 和 rem​

em​
  • n em: 父元素 font-size 的 n 倍;
body {
  font-size: 16px;
}
.slogan {
  font-size: 1.2em;
}
rem​
  • n rem: html 元素 font-size 的 n 倍;
:root {
  font-size: 0.875em;
}
ul {
  font-size: 0.8rem;
}

视口的相对单位​

视口单位​
  • vh: 视口高度的 1/100;
  • vw: 视口宽度的 1/100;

像素​

css 像素​

  • CSS 长度单位;
  • 单位符号: px;

设备像素​

设备像素定义​

  • device pixel;
  • 设备的物理像素;
  • 与 CSS pt 单位无直接等价关系;
与 css 要素的关系​
  • 同一设备: 改变分辨率会改变 1 个 CSS px 对应的物理像素;
  • 不同设备: 1 个 CSS px 对应的物理像素可能不同;

设备独立像素​

设备独立像素定义​

  • 设备无关逻辑像素;
  • 一个设备独立像素对应多个物理像素点;
  • 用于映射 CSS 像素和设备像素;
dpr​
  • 设备像素比;
  • 设备独立像素与设备像素的转化关系;
  • window.devicePixelRatio 属性;
  • dpr = 2: 1 个 CSS px 对应 2 * 2 个设备像素;
ppi​
  • 每英寸像素;

特殊类型​

color 类型​

color 属性值​

/* keyword */
background-color: red;
/* 十六进制值 */
background-color: #ff0000;
/* rgb(a) */
background-color: rgb(255, 0, 0);
background-color: rgb(255, 0, 153, 1);
/* hsl(a) */
background-color: hsl(0, 100%, 50%);
background-color: hsl(0, 100%, 50%, 1);
渐变色​
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

image 类型​

image​

  • url();
  • gradient;
background-image: url("star.gif");
background-image: linear-gradient(#f69d3c, #3f87a6);

position 类型​

position 属性值​

  • keyword;
    • left/right;
    • top/bottom;
    • center;
  • length 类型;
  • percentage 类型;
定位机制​
  • 左上角起点;
  • 右和下为正方向;
多值语法​
  • 1 - value;
    • keyword: keyword + center (other axis);
    • value: value (x) + center (y);
  • 2 - value;
    • keyword + keyword: keyword (对应方向);
    • keyword + value: keyword (对应方向) + value (另一方向);
    • value + value: x + y;
  • 4 - value;
    • keyword value keyword value;
      • keyword: 对应方向;
      • value: 对应方向偏移;

示意图

函数和变量​

calc() 函数​

语法格式​

  • 混合单位计算;
  • 运算符号: 加减乘除;
  • 书写原则: 运算符号前后必须加空格;
width: calc(100% - 80px);

css 变量​

定义 css 变量​

:root {
  --main-font: Helvetica, Arial, sans-serif;
}
使用 css 变量​
:root {
  --main-font: Helvetica, Arial, sans-serif;
}
p {
  font-family: var(--main-font);
}
备用值​
  • 第一个参数无效时使用第二个参数;
:root {
  --main-font: Helvetica, Arial, sans-serif;
  --brand-color: #369;
}
p {
  font-family: var(--main-font, sans-serif);
  color: var(--secondary-color, blue);
}

最佳实践​

视口​

最佳实践​

  • rem 设置字号;
  • px 设置边框;
  • em 设置其他大部分属性;
响应式​
:root {
  font-size: 0.75em;
}
@media (min-width: 800px) {
  :root {
    font-size: 0.875em;
  }
}
@media (min-width: 1200px) {
  :root {
    font-size: 1em;
  }
}