1、引入适配移动端的样式
2、引入normalize.css
3、引入flexible.js
<!-- 移动视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 引入normalize.css -->
<link rel="stylesheet" href="css/normalize.css"/>
<!-- 引入index.css -->
<link rel="stylesheet" href="css/index.css"/>
<!-- 引入flexible.js -->
<script src="js/flexible.js"></script>
介绍：手机淘宝团队出的简洁移动端适配库。原理：将设备划分为10等份，在不同设备下，内容比例还是一致的。我们要做的是确认好当前设备的html文字大小就可以了。
比如：设计稿是750px，那么我们只需要将文字大小设置为（设计稿宽度750 / 10）=75px就可以，里面的页面元素的rem值为：页面元素的px值 / 75；
下载地址：https://github.com/amfe/lib-flexible（需要里面的index.js文件）
body的最大宽度和最小宽度需要限定死，然后宽度为 (设计稿宽度750 / (设计稿宽度750 / 10等份=文字大小)rem。
body {
/* 最小宽度 */
min-width: 320px;
/* 最大宽度因为原稿为750px需要把宽度直接限定死*/
max-width: 750px;
/* 原稿750px flexible把屏幕给我们划分为10等份，转为rem所以是10rem */
width: 10rem;
如何将px转换为rem呢？使用插件cssrem
1、安装cssrem
2、修改1rem=xpx的默认值
vscode设置-搜索：cssroot改为75
如何修改flexible的默认屏幕宽度
如果屏幕超过了750px，那么我们就让他默认为750px，不能超过750px。
使用媒体查询来控制
/* 如果屏幕超过了750px，那么我们就让他默认为750px，不能超过750px。 */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
完整公共样式
/* 去除a标签的下划线 */
a {
text-decoration: none;
}
/*去除所有标签内外边距*/
* {
margin: 0;
padding: 0
}
/*斜体扶正*/
em,
i {
font-style: normal
}
/* 去除li前面的小圆点 */
li {
list-style: none;
}
/* 清除谷歌浏览器下的 input 叉号 */
input::-webkit-search-cancel-button {
display: none;
}
/* 清除IE下的 input 叉号 */
input[type=search]::-ms-clear {
display: none;
}
body {
/* 最小宽度 */
min-width: 320px;
/* 最大宽度因为原稿为750px需要把宽度直接限定死*/
max-width: 750px;
/* 原稿750px flexible把屏幕给我们划分为10等份，转为rem所以是10rem */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background-color: #f2f2f2;
/*不出现水平滚动条*/
overflow-x: hidden;
/*点击链接背景不高亮*/
-webkit-tap-highlight-color: transparent;
/* css3盒模型规则 */
box-sizing: border-box;
}
/* 如果屏幕超过了750px，那么我们就让他默认为750px，不能超过750px。 */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
图片.png
swiper插件（轮播图插件）
使用步骤
1、引入css和js文件
2、查看网页源代码
