技术选型
- 方案∶采取单独制作移动页面方案
- 技术:布局采取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文件
- 新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的htm字体大小，因为除了首页其他页面也需要
- 我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 划分的份数定为15等份
- 因为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布局的做法。
