1. Construya el esqueleto de la carpeta, como se muestra en la figura:
2.index.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置视口：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimumscale=1.0, userscalable=no">
<!-- 移动端使用的公共样式 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
</body>
</html>
3.index.css:
body {
max-width: 540px;
/* 移动端:最小宽度320 */
min-width: 320px;
margin: 0 auto;
background: #fafafc;
/* 水平不要有滚动条 */
overflow-x: hidden;
/* 防止点击背景高亮显示 */
-webkit-tap-highlight-color: transparent;
}
a {
text-decoration: none;
color: gray;
font-size: 13px;
}
li {
list-style: none;
}
4. Estilo público de terminal móvil normalize.css: enlace: https://pan.baidu.com/s/1FMPYeVuaprBEdkz2NS9XEQ
código de extracción: cj42
consejos: los diseños comunes en terminales móviles incluyen [diseño de transmisión (porcentaje), diseño flexible,
diseño de consulta de medios Less + rem + , diseño mixto, diseño receptivo]