1. Build the folder skeleton, as shown in the figure:
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. Mobile terminal public style normalize.css: link: https://pan.baidu.com/s/1FMPYeVuaprBEdkz2NS9XEQ
extraction code: cj42
tips: Common layouts on the mobile terminal include [streaming layout (percentage), Flex layout, Less+rem+ media
query layout, mixed layout, responsive layout]