苏宁首页（less+rem+媒体查询）

方案一（less+rem+媒体查询）

方案：采用单独制做移动端页面

技术选型：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';

link与import的区别

import是指把一个样式文件引入另外一个样式文件.

link是指把样式文件引入html中

body样式

// 设置body样式
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;

}

search-content(顶部搜索框)

思路：采用弹性盒及rem+less+媒体查询等组合方式的布局 中间必定要使用input表单控件中的search按钮，不然会出现bug

banner部分

思路：容器嵌套img标签，容器的宽高设置rem单位，嵌套的img标签设置为父容器的100%的宽度

广告栏部分

思路:采用弹性盒技术，父容器嵌套a标签，a标签占用父容器的分数各为1，a嵌套的img标签设置为100%

nav部分

思路：容器嵌套a标签，a标签采用rem单位，里面嵌套img标签及span标签，img标签和span标签都转换成block（只在rem+less+媒体查询的状况下）

footer部分

思路:采用rem单位及的弹性盒技术

页面元素的计算公式

页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
## 源码

https://pan.baidu.com/s/17r5C...

方案二 ：rem 适配方案2

简写

源码

github地址：https://github.com/amfe/lib-flexible

设置