屏幕尺寸
PC 分辨率
视口
视口的作用:网页宽度 = 逻辑宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
移动适配
rem
<body>
<style>
/* html字号默认 16px */
.box {
/* 16 * 5 = 80px */
width: 5rem;
/* 16 * 2 = 32px */
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
</body>
rem 布局方案中,将网页等分成 10 份,HTML 标签的字号为视口宽度 1/10
rem 单位尺寸
媒体查询
@media (媒体特性) {
/* css样式 */
}
/* eg: */
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
@media (width: 320px) {
html {
font-size: 32px;
}
}
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<style>
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
@media (width: 320px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
</body>
</html>
flexible.js
原理:根据不同的视口宽度,给网页 html 根节点设置不同的 font-size
github: GitHub - amfe/lib-flexible: 可伸缩布局方案
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<style>
.box {
width: 5rem;
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/amfe-flexible@2.2.1/index.min.js"></script>
</body>
</html>
长度单位:vw/vh
vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度) 例如:
357px宽的设备
1vw = 357px / 100 = 3.57px
// index.less
// 375的设计稿:68 * 29
.box {
width: (68 / 3.75vw);
height: (29 / 3.75vw);
}