文章目录

前言
一、技术方案1（less + rem + 媒体查询）
二、搭建相关文件夹结构
三、设置视口标签以及引入初始化样式
四、设置公共common.less
五、新建index.less文件
六、body样式
七、代码展示
八、技术方案2（flexible.js+rem）⭐
- 1.简洁高效的rem适配方案flexible.js
- 2.技术选型
- 3.搭建相关文件夹结构
- 4.设置视口标签以及引入初始化样式还有js文件
- 5.body样式
- 6.vscode px转换rem插件cssrem

前言

案例：苏宁移动端首页
访问地址：https://m.suning.com/

一、技术方案1（less + rem + 媒体查询）

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

二、搭建相关文件夹结构

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

 <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">

四、设置公共common.less

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

五、新建index.less文件

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

// 在index.less中导入common.less文件
@import "common"
// @import导入的意思 可以把一个样式文件导入另外一个样式文件里面
// link是把一个样式文件引入到html页面里面

生成index.css引入到index.html里面

六、body样式

body{min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background-color: #F2F2F2;
}

七、代码展示

body部分

<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>

less部分

// 在index.less中导入common.less文件
// 首页的样式less文件
@import "common";
// @import导入的意思 可以把一个样式文件导入另外一个样式文件里面
// link是把一个样式文件引入到html页面里面
body{min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background-color: #F2F2F2;
}
// 页面元素rem计算公式：页面元素的px/html字体大小 50
// search-content
@baseFont:50px;
.search-content{display: flex;position: fixed;left: 0;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: skyblue;input{outline: none;width: 100%;border: 0;height: (66rem/@baseFont);line-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);line-height:(70rem/@baseFont) ;// background-color: red;margin: (10rem/@baseFont);font-size: (25rem/@baseFont);text-align: center;color: #fff;
}
// 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;}}
}

八、技术方案2（flexible.js+rem）⭐

1.简洁高效的rem适配方案flexible.js

手机淘宝团队出的简介高效移动端适配库

再也不需要再写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，不同设备下，比例还是一致的

我们要做的，就是确定好我们当前设备的html文字大小就可以了

比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px（750px/10)就可以

里面页面元素rem值：页面元素的px值/75

剩余的，让flexible.js去算

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

2.技术选型

方案：采取单独制作移动页面方案
技术：布局采取rem适配布局2（flexible.js+rem）
设计图：采用750px设计尺寸

3.搭建相关文件夹结构

4.设置视口标签以及引入初始化样式还有js文件

 <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">

页面需要引入这个js文件

 <!-- 在index.html中引入flexible.js文件 --><script src="js/flexible.js"></script>

5.body样式

body{min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background-color: #F2F2F2;
}

6.vscode px转换rem插件cssrem

这是一个神奇的插件

这个插件默认的html文字大小cssroot 16px
修改cssroot默认大小，直接在设置中搜cssroot，修改数字即可

移动端苏宁首页制作和rem相关推荐

移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...
移动端电商首页制作-京东
文章目录前言一.技术选型二.搭建相关文件夹结构三.设置视口标签以及引入初始化样式四.常用初始化样式五.二倍精灵图做法六.图片格式 1.DGP图片压缩技术 2.webp图片格式七.代码展 ...
仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载
移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...
移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
rem基础文字大小随着页面自适应页面元素宽高等比例随着页面自适应 rem单位 rem(root em )是一个相对单位,rem的基准是html元素的字体大小. em是父元素字体大小. rem的优点 ...
移动端+京东移动端首页制作
一:移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题 ...
PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...
苏宁首页案例-移动端
效果图 HTML <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...

移动端苏宁首页制作和rem