苏宁易购移动端首页（rem布局）

技术选型

• 方案∶采取单独制作移动页面方案
• 技术:布局采取rem适配布局( less + rem ＋媒体查询)设计图:
• 设计图采用750px设计尺寸

设置视口标签以及引入初始化样式

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>苏宁易购</title>
    <link rel="stylesheet" href="./css/normalize.css">

设置公共common.less文件

1. 新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的htm字体大小，因为除了首页其他页面也需要
2. 我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3. 划分的份数定为15等份
4. 因为pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面

新建index.less文件

1．新建index.less这里面写首页的样式
2．将刚才设置好的common.less 引入到index.less里面语法如下:
 

//在index.less 中导入common.less 文件
@import "common”

搜索区域

因为是rem布局，所以设置宽度高度或者跟数字有关的数据时，都要除以html的文字大小

构造就是使用flex布局，左右定宽，中间flex为1.

    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖器">
            </form>
        </div>
        <a href="" class="login">登录</a>
    </div>

body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    background: #f2f2f2;
}
@basefont:50;
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (88rem / @basefont);
    background-color: #ffc001;
    .classify {
        width: (44rem / @basefont);
        height: (70rem / @basefont);
        margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont) ;
        background: url(../images/classify.png) no-repeat;
        background-size: (44rem / @basefont) (70rem / @basefont);
    }
    .search {
        flex: 1;
        line-height: (75rem / @basefont);
        input {
            outline: none;
            border: 0;
            width: 100%;
            height: (66rem / @basefont);
            border-radius: (33rem / @basefont);
            background-color: #fff2cc;
            font-size: (25rem / @basefont);
            padding-left: (55rem / @basefont);
            color: #757575;
        }
    }
    .login {
        width: (75rem / @basefont);
        height: (70rem / @basefont);
        margin: (10rem / @basefont);
        text-align: center;
        line-height: (70rem / @basefont);
        font-size: (25rem /@basefont);
        color: #fff;
    }
}

banner区域

banner区域放置一张图片，为了使图片也能自适应，应该设定banner的宽度和高度，图片在里面百分百就可以

    <div class="banner">
        <img src="./upload/banner.gif" alt="">
    </div>

// banner
.banner {
    width: (750rem / @basefont);
    height: (368rem / @basefont);
    img {
        width: 100%;
        height: 100%;
    }
}

广告区域

该区域分为三个部分，可使用flex布局使三张链接图片平分为三部分，让a里面的图片宽度百分百即可

    <div class="ad">
        <a href=""><img src="./upload/ad1.gif" alt=""></a>
        <a href=""><img src="./upload/ad2.gif" alt=""></a>
        <a href=""><img src="./upload/ad3.gif" alt=""></a>
    </div>

// ad
.ad {
    display: flex;
    a {
        flex: 1;
        img {
            width: 100%;
        }
    }
}

nav

这次的nav先不用flex布局，用rem布局，每个a元素的宽高固定，再对a元素进行浮动即可

<div class="nav">
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
        <a href=""><img src="./upload/nav1.png" alt="">
            <span>爆款手机</span></a>
    </div>

.nav {
    width: (750rem / @basefont);
    a {
        margin-top: (10rem / @basefont);
        float: left;
        width: (150rem / @basefont);
        height: (140rem / @basefont);
        text-align: center;
        img {
            display: block;
            width: (82rem / @basefont);
            height: (82rem / @basefont);
            margin: (10rem / @basefont) auto 0;
        }
        span {
            font-size: (25rem / @basefont);
            color: #333;
        }
    }
}

剩下的样式都是常规操作，我就不详细说了，以上代码主要是熟悉rem布局的做法。