移动 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.元素漂 ...
随机推荐
- ES6 学习笔记(六)基本类型String
字符串String 1.字面量 需要注意的地方: 由单引号或双引号括起来的字符序列. 单双引号可以嵌套,由最外围引号定界字符串 字符串字面量可以拆分成数行,每行必须以反斜线(\)结束,且反斜线都不计入 ...
- pyinstaller 打包exe相关
-w 只有窗口,没有console -p 加入路径 -F 生成一个exe文件 有虚拟环境时,需要先在cmd中进入虚拟环境,再执行打包程序 # 生成一个exe 无窗口 有icon Pyside2 pyi ...
- C#使用附加到进程调试
微软官网的调试进程介绍 首先运行bin下的可执行文件,然后打开源代码,选择调试--->附加到进程.
- 2022-11-06 Acwing每日一题
本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...
- Vue+Go前端后端一体化 企业级微服务网关项目
Vue+Go前端后端一体化 企业级微服务网关项目(~11) 课程目录: 第1章 拒绝培训机构烂大街项目,冲刺Offer首选[Vue+Go,稀缺组合,赶快上车!]1-1 摒弃千篇一律项目,选我:前后端一 ...
- python3实现AES加密
前言 这几天研究了一下 python 实现 AES 加密,有很多坑 AES 加密的参数及其条件 这个 AES 加密的主要坑就在于这些条件, 首先 aes 加密有一下几个参数 秘钥:加密的时候用秘钥,解 ...
- 1. scrapy 框架应该怎么学习(前言)
其实 scrapy 框架并不难学习, 我觉得分为两部分: 命令 和 代码逻辑的构建 1. 如何学习命令 其实 scrapy 已经帮我们做好了很充足的说明了, 下面我来说如何好好利用这些说明 scrap ...
- 关于 python3 中的多线程的问题及理解
什么是 join() ? join() 有什么用? 答:join() 有一个参数是timeout 设置超时,这里的超时都是针对主线程的,当子线程设置为 join(1) 后,则主线程会等待这个线程 1 ...
- python调用程序路径中包空格,及包含特殊字符问题
解决办法 import os s = r'"C:\Program Files\Google\Chrome\Application\chrome.exe"' print(s) os. ...
- 【每日一题】2021年12月6日-剑指 Offer 22. 链表中倒数第k个节点
输入一个链表,输出该链表中倒数第k个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个节点. 例如,一个链表有 6 个节点,从头节点开始,它们的值依次是 1.2.3.4.5.6 ...