rem适配布局---5. 方案1：苏宁首页制作1

1. 技术选型

访问地址：m.suning.com
方案：我们采用单独制作移动页面方案
技术：布局采用rem适配布局(less+rem+媒体查询)
设计图：本设计图采用750px设计尺寸

2. 搭建相关文件夹结构

css images upload index.html

3. 设置视口标签和引入样式。

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页面里。