移动 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.元素漂 ...
随机推荐
- vue3的学习笔记：MVC、Vue3概要、模板、数据绑定、用Vue3 + element ui、react框架实现购物车案例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.MVC(Mo ...
- 2022年rhce最新认证—（满分通过）
RHCE认证 重要配置信息 在考试期间,除了您就坐位置的台式机之外,还将使用多个虚拟系统.您不具有台式机系统的 root 访问权,但具有对虚拟系统的完整 root 访问权. 系统信息 在本考试期间,您 ...
- RobotFrameWork基础一
1.变量: 作用域: Set Global Variables:设定全局级变量 Set Suite Variables: 设定Test Suite 级变量 Set Test ...
- mysql 基础明细
1.mysql 没有 TOP,用limit实现 2.mysql having 聚合之后,对组操作,和GROUP By搭配 mysql where 聚合之前,对表和视图操作 3.where 子句的作用 ...
- 我要涨知识——TypeScript 常见面试题（二）
又是一个年底来了,好大一批人可能又准备跑路了,最近回家待产,翻了翻掘金和 CSDN 发现好多大佬都有大厂 Offer ,看着看着我心动了! 话不多说,赶紧开干,给自己整了一个前端面试小助手--微信小程 ...
- RFN-Nest_ An end-to-end residual fusion network for infrared and visible images 论文解读
RFN-Nest 2021 研究 图像融合分为三步:特征提取,融合策略,图像重建. 当前端到端的图像融合方法:基于GAN的.还有本文提出的 研究背景:当前设计的融合策略在为特定任务生成融合图像方面是比 ...
- RocketMQ 在网易云音乐的实践
本文作者:蒋星韬,网易云音乐服务端开发工程师. 云音乐线上场景众多,比如直播.评论.广告,各个业务线都会有消息场景比如发奖券,也会有延迟消息和事务消息场景,以及大数据做埋点数据.数据清洗.离线处理等. ...
- [OpenCV实战]10 使用Hu矩进行形状匹配
目录 1 什么是图像矩? 2 如何计算图像矩 2.1 质心获取 2.2 中心矩 2.3 Hu矩 3 基于Hu矩实现形状匹配 3.1 Hu矩的计算 3.2 基于matchShapes函数计算两个图形之间 ...
- Spark详解(08) - Spark(3.0)内核解析和源码欣赏
Spark详解(08) - Spark(3.0)内核解析和源码欣赏 源码全流程 Spark提交流程(YarnCluster) Spark通讯架构 Spark任务划分 Task任务调度 Shuffle原 ...
- Java基础篇——JVM初步
1.JVM的位置 2.JVM体系结构 3.类加载器 虚拟机加载器(java) 启动类(根)加载器(C++) 扩展类加载器(java)↑ 应用程序加载器(java)↑ 4.双亲委派机制 类加载器收到类加 ...