当前位置：首页 > news >正文

苏宁移动端部分首页制作

news 2025/9/1 7:20:17

1.、技术选型方案：我们采取单独制作移动页面方案技术：布局采取rem适配布局（less + rem+ 媒体查询）设计图：本设计图采用750px 设计尺寸

2、搭建相关文件夹结构：index.html，css，upload，images

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

4、设置公共common.less文件：

设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要。

5、新建index.less文件：

// 首页的样式less文件

@import url(common.less);

// @import 是导入的意思可以把一个样式文件导入到另外一个html页面里边

// link是把一个样式文件引入到HTML页面里面去

6、body样式

body {

min-width: 320px;

width: 15rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial, Helvetica, sans-serif;

background: #f2f2f2;

}

详细代码：

index.html代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 顶部搜索框 --><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><!-- banner部分 --><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><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><!-- nav部分 --><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></nav>
</body></html>

index.less代码：

// 首页的样式less文件
@import url(common.less);
// @import 是导入的意思 可以把一个样式文件导入到另外一个html页面里边
// link是把一个样式文件引入到HTML页面里面去body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}// 顶部搜索框
// 页面元素rem的计算公式
// 页面元素的px值除以HTML字体大小
@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);// background-color: pink;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;// background-color: purple;input {outline: none;width: 100%;border: 0;height: (66rem / @baseFont);border-radius: (33rem / @baseFont);background-color: #fff2cc;margin-top: (12rem / @baseFont);font-size: (25rem / @baseFont);padding-left: (55rem / @baseFont);color: #757575;}}.login {width: (75rem / @baseFont);height: (70rem / @baseFont);// background-color: deeppink;margin: (10rem / @baseFont);font-size: (25rem / @baseFont);text-align: center;color: #fff;line-height: (70rem / @baseFont);}
}// banner部分
.banner {width: (750rem / @baseFont);height: (368rem / @baseFont);img {width: 100%;height: 100%;}
}// ad部分
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}// nav部分
nav {width: (750rem / @baseFont);a {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;}}
}

common.less代码：

// 设置常见的屏幕尺寸 修改里面的html文字大小
// 320
// 我们此次定义划分的份数为15
// 一定要写到最上面
html {font-size: 50px;
}a {text-decoration: none;
}@number: 15;
@media screen and (min-width: 320px) {html {font-size: (320px / @number);}
}// 360
@media screen and (min-width: 360px) {html {font-size: (360px / @number);}
}// 375   iphone678
@media screen and (min-width: 375px) {html {font-size: (375px / @number);}
}// 384
@media screen and (min-width: 384px) {html {font-size: (384px / @number);}
}// 400
@media screen and (min-width: 400px) {html {font-size: (400px / @number);}
}// 414
@media screen and (min-width: 414px) {html {font-size: (414px / @number);}
}// 424
@media screen and (min-width: 424px) {html {font-size: (424px / @number);}
}// 480
@media screen and (min-width: 480px) {html {font-size: (480px / @number);}
}// 540
@media screen and (min-width: 540px) {html {font-size: (540px / @number);}
}// 720
@media screen and (min-width: 720px) {html {font-size: (720px / @number);}
}// 750
@media screen and (min-width: 750px) {html {font-size: (750px / @number);}
}