responsive-web-design
自适应一般是设定基准值,宽、高、字体大小都指定为基准值的百分比。当基准值改变时,页面元素、宽高也会按比例变化。
自适应宽度
不使用绝对宽度
网页宽度默认等于屏幕宽度。所以大部分时候只要不适用绝对宽度即可实现自适应宽度:
1
2
3
4
body: {
width: 100%;
// or width: auto;
}
如果元素是图片,也可以使用 max-width 属性,参见responsive web design: image
1
2
3
4
img {
max-width: 100%;
height: auto;
}
使用 media
这适用于需要针对不同的屏幕,显示不同的排版。利用 @media 的 css 规则,可实现根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Media query */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested media query */
@supports (display: flex) {
@media screen and (min-width: 90