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

本文主要是介绍苏宁易购移动端首页（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布局的做法。

这篇关于苏宁易购移动端首页（rem布局）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---