1. 技术选型
访问地址：m.suning.com
方案：我们采用单独制作移动页面方案
技术：布局采用rem适配布局(less+rem+媒体查询)
设计图：本设计图采用750px设计尺寸
2. 搭建相关文件夹结构
css images upload index.html
3. 设置视口标签和引入样式。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
</head>4. 设置公共common.less文件
- 在css文件夹中新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要。
- 我们关心的尺寸有320px、360px、375px、384px、400px、414px
424px、480px、540px、720px、750px - 划分的份数我们定为15份
- 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px, 注意这句话写到最上面。
common.less中的文件内容如下：
// 设置常见的屏幕尺寸 修改里面的html文字大小
//由于pc端的屏幕很大 再划分再除显得不合适 若直接用pc端打开就直接将字体大小限定死为50px
// 这部分代码一定要写在最上面 这样下面的代码在有符合条件的媒体查询时 可以将其层叠掉
html {
font-size: 50px;
}
//若屏幕宽度比较小
// 化分数： 15
@no: 15;
//320px 媒体查询的宽度是css像素 与手机端的物理像素没有关系
@media screen and (min-width: 320px){
html {
font-size: 320px / @no;
}
}
//360px
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
//375px iphone678
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
//384px
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
//400px
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
//414px
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
//424px
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
//480px
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
//540px
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
//720px
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
//750px
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
5. 写首页独有的样式
- 在css文件夹中新建index.less文件
- 将刚写好的common.less引入到index.less里面，在将生成的index.css样式引入到html页面中
//将刚写好的common.less引入到index.less里面 common可以加后缀名less,也可以不加
@import "common.less";导入之后保存会发现，自动生成的index.css文件里面就有了common.css文件里面的内容了。
@import和link的区别：
- @import是导入的意思 可以把一个样式文件导入到另一个样式文件里面
- link是把一个样式文件引入到html页面里。