移动 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.元素漂 ...
随机推荐
- 使用WSL2连接USB设备
目录 要求 安装 第一步 在Window安装usbipd 第二步 在WSL里安装USBIP 工具和硬件数据库 使用方法 22.3.19 微软官方文档:连接 USB 设备 | Microsoft Doc ...
- 云原生之旅 - 9）云原生时代网关的后起之秀Envoy Proxy 和基于Envoy 的 Emissary Ingress
前言 前一篇文章讲述了基于Nginx代理的Kuberenetes Ingress Nginx[云原生时代的网关 Ingress Nginx]这次给大家介绍下基于Envoy的 Emissary Ingr ...
- SpringBoot yml配置文件中，logging.level报错
报错 *************************** APPLICATION FAILED TO START *************************** Description: ...
- 【iOS逆向】某茅台App算法分析还原
1.目标 某茅台软件的actParam算法分析还原. 2.使用工具 mac系统 frida-ios-dump:砸壳 已越狱iOS设备:脱壳及frida调试 IDA Pro:静态分析 Charles:抓 ...
- Redis集群研究和实践（基于redis 3.2.5）（一）
前言 Redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到广泛的使 用. Redis在2015年发布了3.0.0,官方支持了redis cluster.至此结束了redis ...
- 2流高手速成记（之九）：基于SpringCloudGateway实现服务网关功能
咱们接上回 上一节我们基于Sentinel实现了微服务体系下的限流和熔断,使得整个微服务架构的安全性和稳定性上升了一个台阶 篇尾我们引出了一个问题,众多的微服务节点,我们如何部署才能满足客户端简洁高效 ...
- SpringDataJpa源码理解
SpringDataJpa源码理解 上一篇讲解了SpringDataJpa的基本使用,下面简单说一下源码 我们以其中的一个test为案例进行分析: 我们可以发现resumeDao它是一个代理对象,类型 ...
- 《浅谈亚 log 数据结构在 OI 中的应用》阅读随笔
这篇又长长长了! \(8435\to 8375\to 9729\) 早就馋这篇了!终于学了( 压位 Trie 确实很好写啊 但是总感觉使用范围不是很广的样子 似乎是见的题少 原文里都在用 \(\log ...
- 4.2：Scrapy爬虫
使用Scrapy框架对网站的内容进行爬取 在桌面处打开终端,并在终端中输入: scrapy startproject bitNews cd bitNews/bitNews 修改items文件的内容,输 ...
- Linux基础第五章 进程控制
5.2 fork fork函数实现进程复制,类似于动物界的单性繁殖,fork函数直接创建一个子进程.这是Linux创建进程最常用的方法.在这一小节中,子进程概念指fork产生的进程,父进程指主动调用f ...