0%

css

发表于 分类于
本文字数： 1.2k 阅读时长 ≈ 1 分钟

CSS

em

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

rem

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

rem取值分为两种情况，设置在根元素时和非根元素时，举个例子

1
2
3
4
5
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}

vh vw

想让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh

vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN

1
2
3
4
div {
    width: 100vw;
    height: 100vh;
}

media query

@media 查询，可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

css 语法

1
2
3
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

可以针对不同的媒体使用不同 stylesheets

1
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

flex

1
2
3
4
5
<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}