技术选型
计划:采纳独自制作挪动端页面
技术选型:rem 适配布局(less+ rem+ 媒体查问)
采纳 750px 设计尺寸
步骤
1. 搭建相干文件夹构造
2 设置视口标签及引进 css 初始化款式
<!-- 设置视口标签 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 引进 css 初始化款式 -->
<link rel="stylesheet" href="./css/normalize.css">
3. 新建 common.less 文件
- 新建 commem.less 文件,设置好常见的尺寸,利用媒体查问设置不同的 html 字体大小
- 关怀的尺寸有 320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
- 划分的分数设置为 15 等份
- pc 端设置的 html 字体为 50px(写在最下面)
4. 新建 index.less 文件
- 新建 index.less 文件 指的是首页的款式
- 将方才设置好的 common.less 文件导入 index.less 外面。
- 最初把 index.css 文件引入 html 文件中
@import 'common';