移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作
一、技术选型
二、搭建相关文件夹结构
三、设置视口标签以及引入初始化样式
四、设置公共common.less 文件
common.less
//设置常见的屏幕尺寸大小，修改里面的html 文字大小
//因为在 pc 端也可以打开苏宁的移动端网页
//我们默认字体大小为 50 px
html {
font-size: 50px;
}
//注意：这句话一定要写在最上面
//定义划分的份数 15等份
@no:15;
//320 大小的屏幕
@media screen and (min-width:320px){
html{
font-size: 320px / @no;
}
}
//360 大小的屏幕
@media screen and (min-width:360px){
html{
font-size: 360px / @no;
}
}
// 375 大小的屏幕 iPhone6/7/8的屏幕大小尺寸
@media screen and (min-width:375px){
html{
font-size: 375px / @no;
}
}
// 384
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
// 400
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
// 414
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
五、新建index.less文件
index.less
//导入 common.less文件
@import "common";
//文件后缀名可写可不写
index.html
<link rel="stylesheet" href="css/index.css">
六、苏宁首页 body 样式设置
body {
min-width: 320px;
width: 15rem;
//750像素下，一个rem就是 html的 font-size 也就是 50px
//那么15rem就是 750px，
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
七、苏宁首页 search-content 模块布局
index.html
<body>
<!-- 顶部部分 -->
<div class="search-content">123</div>
</body>
index.less
// 顶部模块
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
@baseFont:50;
.search-content{
height: 88rem / @baseFont;
width: 15rem;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #FFC001;
}
八、苏宁首页 search-content 内容布局
index.html
<div class="search-content">
<div class="classify">1</div>
<div class="search">2</div>
<div class="login">3</div>
</div>
index.less
@baseFont:50;
.search-content{
height: 88rem / @baseFont;
width: 15rem;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #FFC001;
display: flex;
.classify {
width: 44rem / @baseFont;
height: 70rem / @baseFont;
background-color: pink;
margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
}
.search {
flex: 1;
background-color: purple;
}
.login {
width:75rem / @baseFont ;
height: 70rem / @baseFont;
background-color: blue;
margin: 10rem / @baseFont;
}
}
九、苏宁首页 search-content 内容制作
index.html
<div class="search-content">
<div class="classify"></div>
<div class="search">
<form action="">
<input type="search" value="双十一预售 定金10倍翻">
</form>
</div>
<div class="login">登录</div>
</div>
index.less
@baseFont:50;
.search-content{
height: 88rem / @baseFont;
width: 15rem;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #FFC001;
display: flex;
.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 {
width: 100%;
height: 66rem / @baseFont;
background-color: #FFF2CC;
border-radius: 33rem / @baseFont;
margin-top: 12rem / @baseFont;
padding-left: 55rem / @baseFont;
font-size: 25rem / @baseFont;
outline: none;
border: 0;
color: #757575;
}
}
.login {
width:75rem / @baseFont ;
height: 70rem / @baseFont;
// background-color: blue;
margin: 10rem / @baseFont;
font-size: 25rem / @baseFont;
color: #ffff;
text-align: center;
line-height: 70rem / @baseFont;
}
}
十、banner 和 广告内容制作
index.html
<!-- 广告部分 -->
<div class="ad">
<a href=""><img src="upload/ad1.gif"/></a>
<a href=""><img src="upload/ad2.gif"/></a>
<a href=""><img src="upload/ad3.gif"/></a>
</div>
index.less
// 广告部分
.ad {
display: flex;
a {
flex: 1;
img{
width: 100%;
}
}
}
可实现自适应效果
十一、nav内容制作
index.html
<!-- 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>
index.less
// 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;
}
}
}
移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作的更多相关文章
- 移动web开发之rem适配布局
移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
- rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- PostCSS的插件 -- 关于vue rem适配布局方案
PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...
- 移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 从零开始学 Web 之 移动Web（六）响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css 布局方式
布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...
- css常见的各种布局上（两列布局）
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
随机推荐
- "xxx cannot be cast to jakarta.servlet.Servlet "报错解决方式
在做jsp的上机时候同学出现了一个500错误:com.kailong.servlet.ComputeBill cannot be cast to jaka.servlet.Servlet 然后因为我用 ...
- Day11.2：标签的使用
标签的使用 当我们在嵌套语句中,例如当我们在for的嵌套循环语句中,想要终止或重新开始当前循环以外的循环的时候,单独仅靠break和continue和还不够,需要在我们想要作用的循环语句处加上一个标签 ...
- nginx配置https后，网站出现无法访问情况
证书来自阿里云. Nginx配置如下 server { listen 443; server_name package.oeynet.com; root /server/wwwroot/package ...
- 重学c#系列——动态类型[二十二]
前言 该系列准备继续完善,一共108篇,持续更新. 正文 为什么有动态类型呢? 是因为很多东西天生就是动态类型的. 比如xml 和 json.cvs.数据库表,这些本来就是数据类型的. 在反射系列中提 ...
- 如何使用zx编写shell脚本
前言 在这篇文章中,我们将学习谷歌的zx库提供了什么,以及我们如何使用它来用Node.js编写shell脚本.然后,我们将学习如何通过构建一个命令行工具来使用zx的功能,帮助我们为新的Node.js项 ...
- Axios 类似于for循环发送批量请求{：axios.all axios.spread}。
Axios的请求都是异步的!不能用for循环遍历去批量发送请求 那如果我们需要类似与这样的请求怎么办呢 for(let i =0;i<array.length;i++){ axios.post( ...
- uboot引导应用程序
uboot默认是支持执行应用程序的,就像引导内核一样,我们也可以自己写一个应用程序,让uboot启动时引导. 在uboot examples/standalone 目录下,有hello_world.c ...
- js 传递路径参数到后台的转码和解码
在开发中遇到前端页面需要将一个附件的路径传递后台实现业务逻辑,但不进行编码一直报404的错误,上代码. 前端编码:JavaScript函数encodeURL() 说明:1 .encodeURL函数主要 ...
- 规则引擎Drools在贷后催收业务中的应用
作者:vivo 互联网服务器团队- Feng Xiang 在日常业务开发工作中我们经常会遇到一些根据业务规则做决策的场景.为了让开发人员从大量的规则代码的开发维护中释放出来,把规则的维护和生成交由业务 ...
- Qt的进程间通信,以服务器的形式，手把手教你VS上进行Qt的COM、ActivedQt Server的开发，比保姆还保姆（一）
Qt的进程间通信,以Active服务器的形式,手把手教你VS上进行Qt的COM.ActivedQt Server的开发,比保姆还保姆 写在前面,文中的ID有部分对不上,因为我中途改了一下,我建议你在实 ...