技术选型
计划:采纳独自制作挪动端页面技术选型: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';