移动端常见布局
移动端常见布局
1. 流式布局（百分比布局）
- 流式布局就是百分比布局，也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度（max-height最大宽度）
- min-width 最小宽度（min-height最小宽度）
2. 案例：京东移动端首页
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>京东首页title>
head>
<body>
<header class="app">
<ul>
<li><img src="images/close.png" alt="">li>
<li><img src="images/logo.png" alt="">li>
<li>打开京东App，购物更轻松li>
<li>立即打开li>
ul>
header>
<div class="search-wrap">
<div class="search-btn">div>
<div class="search">
<div class="jd-icon">div>
<div class="sou">div>
div>
<div class="search-login">登录div>
div>
<div class="main-content">
<div class="slider">
<img src="upload/banner.dpg" alt="">
div>
<div class="brand">
<div>
<a href="#"><img src="upload/pic11.dpg" alt="">a>
div>
<div>
<a href="#"><img src="upload/pic22.dpg" alt="">a>
div>
<div>
<a href="#"><img src="upload/pic33.dpg" alt="">a>
div>
div>
<nav>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市span>
a>
<a href="#">
<img src="upload/nav2.webp" alt="">
<span>数码电器span>
a>
<a href="#">
<img src="upload/nav3.webp" alt="">
<span>京东服饰span>
a>
<a href="#">
<img src="upload/nav4.webp" alt="">
<span>京东生鲜span>
a>
<a href="#">
<img src="upload/nav5.webp" alt="">
<span>京东到家span>
a>
<a href="#">
<img src="upload/nav6.webp" alt="">
<span>充值缴费span>
a>
<a href="#">
<img src="upload/nav7.webp" alt="">
<span>物流查询span>
a>
<a href="#">
<img src="upload/nav8.webp" alt="">
<span>领券span>
a>
<a href="#">
<img src="upload/nav9.webp" alt="">
<span>零津贴span>
a>
<a href="#">
<img src="upload/nav10.webp" alt="">
<span>PLUS会员span>
a>
nav>
<div style="clear: both;">div>
<div class="news">
<a href="#">
<img src="upload/new1.dpg" alt="">
a>
<a href="#">
<img src="upload/new2.dpg" alt="">
a>
<a href="#">
<img src="upload/new3.dpg" alt="">
a>
div>
div>
body>
html>
index.css
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, 'Helvetica', sans-serif;
color: #666;
line-height: 1.5;
background-color: #ccc;
height: 2000px;
}
/* 点击高亮我们可以需要清除 设置为transparent完成透明 */
* {
-webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */
input {
-webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,
a {
-webkit-touch-callout: none;
}
a {
color: #666;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 解决图片与盒子缝隙 */
img {
vertical-align: middle;
}
/* 顶部 */
.app {
height: 45px;
}
.app ul li {
float: left;
height: 45px;
background-color: #333333;
text-align: center;
line-height: 45px;
color: #fff;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img{
width: 10px;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 30px;
/* 文字与图片居中对齐 */
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #F63515;
}
/* 搜索 */
.search-wrap {
position: fixed;
width: 100%;
height: 44px;
/* 给子盒子设置margin-top值会导致父盒子坍塌，外边距合并问题 */
overflow: hidden;
min-width: 320px;
max-width: 640px;
}
.search-btn {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
}
.search-btn::before {
content: "";
display: block;
width: 20px;
height: 18px;
background: url(../images/s-btn.png) no-repeat;
/* 缩放 */
background-size: 20px 18px;
margin: 14px 0 0 15px;
}
.search {
position: relative;
height: 30px;
background-color: #fff;
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;
}
.jd-icon {
position: absolute;
top: 8px;
left: 13px;
width: 20px;
height: 15px;
background: url(../images/jd.png) no-repeat;
background-size: 20px 15px;
}
.jd-icon::after {
content: "";
position: absolute;
top: 0;
right: -8px;
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background-color: pink;
background: url(../images/jd-sprites.png) no-repeat -81px 0 ;
background-size: 200px auto;
}
.search-login {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 44px;
color: #fff;
line-height: 44px;
}
.slider img {
width: 100%;
}
/* 品骗日 */
.brand {
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.brand div {
float: left;
width: 33.333%;
}
.brand div img {
width: 100%;
}
nav {
padding-top: 5px;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
display: block;
}
/* 新闻模块 */
.news {
margin-top: 20px;
}
.news img {
width: 100%;
}
.news a {
float: left;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
/* .news a:nth-child(n+2) */
.news a:nth-child(2),
.news a:nth-child(3) {
width: 25%;
border-left: 1px solid #ccc;
}
3. flex布局
1. 传统布局与flex布局
- 传统布局
- 兼容性好，布局繁琐
- 局限性，不能在移动端很好的布局
- flex弹性布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差
- IE 11或更低版本不支持或仅部分支持
建议：
- 如果是PC端页面布局，我们还是传统布局
- 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
2. flex布局原理
-
布局原理
flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型最大的灵活性，任何一个容器都可以指定为flex布局
- 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
-
采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
3. flex布局父项常见属性
1. flex-direction 设置主轴的方向
(1) 主轴和侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
(2) 属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴space，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右（123） |
| row-reverse | 从右到左（321） |
| column | 从上到下 |
| column-reverse | 从下到上 |
2. justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从头部开始 如果主轴是x轴，则从左到右（123） |
| flex-end | 从尾部开始排列（123） |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间(重要) |
3. flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线(又称"轴线")上。flex-wrap属性定义，flex布局中默认是不换行的.
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值 不换行 |
| wrap | 换行 |
4. align-items设置侧轴上的排列方式(单行)
该属性是控制子项在侧轴(默认是y轴)上的排列方式，在子项为单项的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起（垂直居中） |
| stretch | 拉伸（默认值）子盒子不要给高度 |
5. align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
6. align-content 和 align-items的区别
- align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
- align-content适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
- 总结就是单行找align-items多行找align-content
7. flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap;
5. flex布局子项常见属性
1. flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item {
flex: ; /* default 0 */
}
2. align-self 控制子项自己在侧轴的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3. order属性定义子项的排列顺序（前后顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样
4. 案例：携程移动端首页
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>携程网title>
head>
<body>
<div class="search-index">
<div class="search">搜索：目的地/酒店/景点/航班号div>
<a href="#" class="user">我 的a>
div>
<div class="focus">
<img src="upload/focus.jpg" alt="">
div>
<ul class="local-nav">
<li>
<a href="#" title="景点·玩乐">
<span class="local-nav-icon-1">span>
<span>景点·玩乐span>
a>
li>
<li>
<a href="#" title="周边游">
<span class="local-nav-icon-2">span>
<span>周边游span>
a>
li>
<li>
<a href="#" title="美食林">
<span class="local-nav-icon-3">span>
<span>美食林span>
a>
li>
<li>
<a href="#" title="一日游">
<span class="local-nav-icon-4">span>
<span>一日游span>
a>
li>
<li>
<a href="#" title="当地攻略">
<span class="local-nav-icon-5">span>
<span>当地攻略span>
a>
li>
ul>
<nav>
<div class="nav-common">
<div class="nav-items">
<a href="#">
<span class="icon-1">span>
<span>酒店span>
a>
div>
<div class="nav-items">
<a href="#">海外酒店a>
<a href="#">特价酒店a>
div>
<div class="nav-items">
<a href="#">团购a>
<a href="#">民宿·客栈a>
div>
div>
<div class="nav-common">
<div class="nav-items">
<a href="#">
<span class="icon-2">span>
<span>机票span>
a>
div>
<div class="nav-items">
<a href="#">火车票a>
<a href="#">特价机票a>
div>
<div class="nav-items">
<a href="#">汽车票·船票a>
<a href="#">专车·租车a>
div>
div>
<div class="nav-common">
<div class="nav-items">
<a href="#">
<span class="icon-3">span>
<span>旅游span>
a>
div>
<div class="nav-items">
<a href="#">门票a>
<a href="#">目的地攻略a>
div>
<div class="nav-items">
<a href="#">邮轮旅行a>
<a href="#">定制旅行a>
div>
div>
nav>
<ul class="subnav-entry">
<li>
<a href="#" title="WiFi电话卡">
<span class="subnav-entry-icon-1">span>
<span>WiFi电话卡span>
a>
li>
<li>
<a href="#" title="保险·签证">
<span class="subnav-entry-icon-2">span>
<span>保险·签证span>
a>
li>
<li>
<a href="#" title="外币兑换">
<span class="subnav-entry-icon-3">span>
<span>外币兑换span>
a>
li>
<li>
<a href="#" title="购物">
<span class="subnav-entry-icon-4">span>
<span>购物span>
a>
li>
<li>
<a href="#" title="当地向导">
<span class="subnav-entry-icon-5">span>
<span>当地向导span>
a>
li>
<li>
<a href="#" title="自由行">
<span class="subnav-entry-icon-6">span>
<span>自由行span>
a>
li>
<li>
<a href="#" title="境外玩乐">
<span class="subnav-entry-icon-7">span>
<span>境外玩乐span>
a>
li>
<li>
<a href="#" title="礼品卡">
<span class="subnav-entry-icon-8">span>
<span>礼品卡span>
a>
li>
<li>
<a href="#" title="信用卡">
<span class="subnav-entry-icon-9">span>
<span>信用卡span>
a>
li>
<li>
<a href="#" title="更多">
<span class="subnav-entry-icon-10">span>
<span>更多span>
a>
li>
ul>
<div class="sales-box">
<div class="sales-hd">
<h2>热门活动h2>
<a href="#" class="more">获取更多福利a>
div>
<div class="sales-bd">
<div class="row">
<a href="#">
<img src="upload/pic1.jpg" alt="">
a>
<a href="#">
<img src="upload/pic2.jpg" alt="">
a>
div>
<div class="row">
<a href="#">
<img src="upload/pic3.jpg" alt="">
a>
<a href="#">
<img src="upload/pic4.jpg" alt="">
a>
div>
<div class="row">
<a href="#">
<img src="upload/pic5.jpg" alt="">
a>
<a href="#">
<img src="upload/pic6.jpg" alt="">
a>
div>
div>
div>
body>
html>
index.css
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
-webkit-tap-highlight-color: transparent;
}
a {
text-decoration: none;
color: #222;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
/* 搜索模块 */
.search-index {
display: flex;
/* 固定定位跟父级没有关系，它以屏幕为准 */
position: fixed;
top: 0;
left: 50%;
/* 兼容老版本浏览器 */
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
/* 固定的盒子应该有宽度 */
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
position: relative;
flex: 1;
height: 26px;
border: 1px solid #ccc;
font-size: 12px;
color: #666;
line-height: 24px;
padding-left: 25px;
margin: 7px 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgb(0, 0, 0, .2);
}
.search::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 15px;
height: 15px;
background: url(../images/sprite.png) -59px -279px no-repeat;
background-size: 104px auto;
}
.user {
width: 44px;
height: 44px;
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: "";
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) -58px -194px no-repeat;
/* 记得缩放 */
background-size: 104px auto;
margin: 4px auto -2px;
}
/* 焦点图模块 */
.focus {
padding-top: 44px;
}
.focus img {
width: 100%;
}
/* 局部导航栏 */
.local-nav {
display: flex;
height: 64px;
background-color: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1;
}
.local-nav a {
display: flex;
flex-direction: column;
/* 侧轴居中对齐 */
align-items: center;
font-size: 12px;
}
.local-nav li [class^="local-nav-icon"] {
width: 32px;
height: 32px;
margin-top: 8px;
background: url(../images/localnav_bg.png) 0 0 no-repeat;
background-size: 32px auto;
}
.local-nav li .local-nav-icon-2 {
background-position: 0 -32px;
}
.local-nav li .local-nav-icon-3 {
background-position: 0 -64px;
}
.local-nav li .local-nav-icon-4 {
background-position: 0 -96px;
}
.local-nav li .local-nav-icon-5 {
background-position: 0 -128px;
}
/* 主导航栏 */
nav {
overflow: hidden;
border-radius: 8px;
margin: 0 4px 3px;
}
[class^="nav-common"] {
display: flex;
height: 88px;
}
.nav-common:nth-child(2) {
margin: 3px 0;
}
.nav-items {
/* 属性不冲突 */
flex: 1;
display: flex;
flex-direction: column;
}
.nav-items a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
font-size: 14px;
/* 文字阴影 */
text-shadow: 1px 1px rgb(0, 0, 0, .2);
}
.nav-items a:nth-child(1) {
border-bottom: 1px solid #fff;
}
[class^="nav-common"] .nav-items:nth-child(1) a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 0;
}
.nav-common [class^="icon"] {
width: 28px;
height: 28px;
margin-bottom: 4px;
background: url(../images/mainnav.png) 0 -80px no-repeat;
background-size: 28px auto;
}
.nav-common .icon-2 {
background-position: 0 -167px;
}
.nav-common .icon-3 {
background-position: 0 -139px;
}
/* -n+2就是选择前面两个元素 */
.nav-items:nth-child(-n+2) {
border-right: 1px solid #fff;
}
/* 背景颜色线性渐变 */
.nav-common:nth-child(1) {
background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2) {
background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3) {
background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}
/* 侧导航栏 */
.subnav-entry {
display: flex;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
flex-wrap: wrap;
padding: 5px;
}
.subnav-entry li {
flex: 20%;
}
.subnav-entry a {
display: flex;
flex-direction: column;
align-items: center;
}
.subnav-entry li [class^="subnav-entry-icon"] {
width: 28px;
height: 28px;
margin-top: 4px;
background: url(../images/subnav-bg.png) no-repeat;
background-size: 28px auto;
}
.subnav-entry li .subnav-entry-icon-2 {
background-position: 2px -30px;
}
.subnav-entry li .subnav-entry-icon-3 {
background-position: 2px -64px;
}
.subnav-entry li .subnav-entry-icon-4 {
background-position: 0 -100px;
}
.subnav-entry li .subnav-entry-icon-5 {
background-position: 0 -134px;
}
.subnav-entry li .subnav-entry-icon-6 {
background-position: 4px -164px;
}
.subnav-entry li .subnav-entry-icon-7 {
background-position: 0 -198px;
}
.subnav-entry li .subnav-entry-icon-8 {
background-position: 0 -234px;
}
.subnav-entry li .subnav-entry-icon-9 {
background-position: 0 -262px;
}
.subnav-entry li .subnav-entry-icon-10 {
background-position: 2px -292px;
}
.sales-box {
border-top: 1px solid #bbb;
background-color: #fff;
margin: 4px;
}
.sales-hd {
position: relative;
height: 44px;
border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
position: relative;
/* 缩进量 */
text-indent: -999px;
overflow: hidden;
}
.sales-hd h2::after {
position: absolute;
top: 8px;
left: 20px;
content: "";
width: 79px;
height: 15px;
background: url(../images/hot.png) 0 -20px no-repeat;
background-size: 79px auto;
}
.more {
position: absolute;
right: 5px;
top: 0;
background: -webkit-linear-gradient(left,#FF506C,#ff6BC6);
border-radius: 15px;
padding: 3px 20px 3px 10px;
color: #fff;
font-size: 13px;
}
.more::after {
content: "";
position: absolute;
top: 9px;
right: 9px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.row {
display: flex;
}
.row a {
flex: 1;
border-bottom: 1px solid #eee;
}
.row a:nth-child(1) {
border-right: 1px solid #eee;
}
.row a img {
width: 100%;
}
5. rem适配布局
流式布局和flex布局主要针对于宽度布局，rem适配布局可设置高度布局。
1. rem单位
rem（root em）是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size: 12px; 非根元素设置width: 2rem; 则换成px表示就是24px。
2. 媒体查询
媒体查询（Madia Query）是CSS3的新语法。
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
语法规范：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 用@media开头注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
mediatype查询类型：
将不同终端设备划分成不同的类型，称为媒体类型。
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，平板电脑，智能手机等 |
关键字：
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and：可以将多个媒体特性连接到一起，相当于“且”的意思
- not：排除某个媒体类型，相当于“非”的意思，可以省略
- only：指定某个特定的媒体类型，可以省略
媒体特性：
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意它们要加小括号包含
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备钟页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域的宽度 |
| max-width | 定义输出设备中页面最大可见区域的宽度 |
3. 案例：根据页面宽度改变背景变色
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是建议还是从小到大来写，这样代码更简洁。
4. 媒体查询 + rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸。
媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化。
5. 案例：媒体查询+ren实现元素变化
媒体查询
"top">购物车
5. 引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）
原理：就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法规范：
6. Less基础
维护css的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
- 不方便维护及扩展，不利于复用
- CSS没有很好的计算能力
- 对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
Less中文网址
常见的CSS预处理器：Sass、Less、Stylus
文件后缀名：.less
1. Less变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名: 值;
变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
2. Less编译
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
安装vscode Less插件
Easy LESS插件用来吧less文件编译为css文件。
3. Less嵌套
我们经常用到选择器的嵌套
#header .logo {
width: 300px;
}
Less嵌套写法：
#header {
.logo {
width: 300px;
}
}
如果遇见（交集|伪类|伪元素选择器）
- 内层选择器的前面没有&符号，则它被解析为父选择器的后代
- 如果有&符号，它就被解析为父元素自身或父元素的伪类
a:hover {
color: red;
}
Less嵌套写法：
a {
&:hover {
color: red;
}
}
4. Less运算
任何数字、颜色或者变量都可以参与运算。就是less提供了加减乘除算术运算。
/* Less里面写 */
@width: 10px + 5;
div {
border: @width solid red;
}
/* 生成的css */
div {
border: 15px solid red;
}
/* Less 还可以这样 */
width: (@width + 5) * 2;
注意：
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就是去该单位
7. rem适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；(媒体查询)
- CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
技术方案：
-
less + 媒体查询 + rem
设计稿常见尺寸宽度设备 常见宽度 iPhone 4、5 640px iphone 6、7、8 750px Android 常见320px、360px、375px、384px、400px、414px、500px、720px大部分4.7~5寸的安卓设备为720px
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750px为准。
- flexible.js + rem（推荐）
6. 案例：苏宁移动端首页（rem适配方案1）
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>苏宁title>
head>
<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>
<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>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>苏宁秒杀span>
a>
<a href="#">
<img src="upload/nav2.png" alt="">
<span>苏宁超市span>
a>
<a href="#">
<img src="upload/nav3.png" alt="">
<span>苏宁拼购span>
a>
<a href="#">
<img src="upload/nav4.png" alt="">
<span>手机数码span>
a>
<a href="#">
<img src="upload/nav5.png" alt="">
<span>苏宁家电span>
a>
<a href="#">
<img src="upload/nav6.png" alt="">
<span>免费水果span>
a>
<a href="#">
<img src="upload/nav7.png" alt="">
<span>super会员span>
a>
<a href="#">
<img src="upload/nav8.png" alt="">
<span>签到有礼span>
a>
<a href="#">
<img src="upload/nav9.png" alt="">
<span>领券中心span>
a>
<a href="#">
<img src="upload/nav10.png" alt="">
<span>更多频道span>
a>
nav>
body>
html>
common.less
// 设置常见的屏幕尺寸，修改里面的html文字大小
// 写在最上面
html {
font-size: 50px;
}
a {
text-decoration: none;
}
// 定义的划分的份数为15
@no: 15;
// 320px
@media screen and (min-width: 320px) {
html{
font-size: (320px / @no);
}
}
// 360px
@media screen and (min-width: 360px) {
html {
font-size: (360px / @no);
}
}
// 375px iphone6,7,8
@media screen and (min-width: 375px) {
html {
font-size: (375px / @no);
}
}
// 384px
@media screen and (min-width: 384px) {
html{
font-size: (384px / @no);
}
}
// 400px
@media screen and (min-width: 400px) {
html{
font-size: (400px / @no);
}
}
// 414px
@media screen and (min-width: 414px) {
html{
font-size: (414px / @no);
}
}
// 424px
@media screen and (min-width: 424px) {
html{
font-size: (424px / @no);
}
}
// 480px
@media screen and (min-width: 480px) {
html{
font-size: (480px / @no);
}
}
// 540px
@media screen and (min-width: 540px) {
html{
font-size: (540px / @no);
}
}
// 720px
@media screen and (min-width: 720px) {
html{
font-size: (720px / @no);
}
}
// 750px
@media screen and (min-width: 750px) {
html{
font-size: (750px / @no);
}
}
index.less
// 导入common.less文件
@import "common";
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #F2F2F2;
}
// 页面元素rem计算公式：页面元素的px / html 字体大小50
// 搜索框
@baseFont: 50;
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: (88rem / @baseFont);
background-color: #FFC001;
.classify {
width: (44rem / @baseFont);
height: (70rem / @baseFont);
background: url(../images/classify.png) no-repeat;
background-size: (44rem / @baseFont) (70rem / @baseFont);
margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
}
.search {
flex: 1;
input {
outline: none;
border: 0;
width: 100%;
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);
margin: (10rem / @baseFont);
font-size: (25rem / @baseFont);
text-align: center;
line-height: (70rem / @baseFont);
color: #fff;
}
}
// banner模块
.banner {
width: (750rem / @baseFont);
height: (368rem / @baseFont);
img {
width: 100%;
height: 100%;
}
}
// 广告模块
.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 {
display: block;
font-size: (25rem / @baseFont);
color: #333;
}
}
}
7. 案例：苏宁移动端首页（rem适配方案2）
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/flexible.js">script>
<title>苏宁title>
head>
<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>
<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>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>苏宁秒杀span>
a>
<a href="#">
<img src="upload/nav2.png" alt="">
<span>苏宁超市span>
a>
<a href="#">
<img src="upload/nav3.png" alt="">
<span>苏宁拼购span>
a>
<a href="#">
<img src="upload/nav4.png" alt="">
<span>手机数码span>
a>
<a href="#">
<img src="upload/nav5.png" alt="">
<span>苏宁家电span>
a>
<a href="#">
<img src="upload/nav6.png" alt="">
<span>免费水果span>
a>
<a href="#">
<img src="upload/nav7.png" alt="">
<span>super会员span>
a>
<a href="#">
<img src="upload/nav8.png" alt="">
<span>签到有礼span>
a>
<a href="#">
<img src="upload/nav9.png" alt="">
<span>领券中心span>
a>
<a href="#">
<img src="upload/nav10.png" alt="">
<span>更多频道span>
a>
nav>
body>
html>
index.css
body {
min-width: 320px;
max-width: 750px;
/* flexible.js划分为10等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #F2F2F2;
}
a {
text-decoration: none;
}
/* 如果屏幕超过设计稿750px，那么就按照设计稿走，不让我们的页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
/* cssrem插件默认的html文字大小 cssroot 16px ，这里设置的是75px*/
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.1733rem;
background-color: #FFC001;
}
.classify {
width: .5867rem;
height: .9333rem;
background: url(../images/classify.png) no-repeat;
margin: .1467rem .3333rem .1333rem;
background-size: .5867rem .9333rem;
}
.search {
flex: 1;
}
.search input {
outline: none;
border: 0;
width: 100%;
height: .88rem;
font-size: .3333rem;
background-color: #FFF2CC;
margin-top: .1333rem;
border-radius: .44rem;
color: #757575;
padding-left: .7333rem;
}
.login {
width: 1rem;
height: .9333rem;
margin: .1333rem;
color: #fff;
text-align: center;
line-height: .9333rem;
font-size: .3333rem;
}
.banner {
font-size: 0;
}
.banner img {
width: 100%;
height: 100%;
}
.ad {
display: flex;
}
.ad a {
flex: 1;
}
.ad a img {
width: 100%;
}
nav {
width: 10rem;
}
nav a {
float: left;
width: 2rem;
height: 1.8667rem;
text-align: center;
}
nav img {
display: block;
width: 1.0667rem;
height: 1.0933rem;
margin: .1333rem auto;
}
nav span {
display: block;
font-size: .3333rem;
color: #333;
}
8. vw vh移动端布局
1. vw/vh是什么？
- vw/vh是一个相对单位（类似em和rem相对单位）
- vw：viewport width（视口宽度单位）
- vh：viewport height（视口宽度单位）
- 相对视口的尺寸计算结果
- 1vw = 1/100视口宽度
- 1vh= 1/100视口高度
- 例如：当前屏幕视口是375像素，则1vw就是3.75像素，如果当前屏幕视口为414像素，则1vw就是4.14像素。
- 注意：和百分比是有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。
2. 如何还原设计稿
-
前提：我们设计稿按照iPhone678来设计，有个盒子是50像素*50像素的，如何使用vw呢？
分析：
- 设计稿参照iPhone678，所以视口宽度尺寸是375像素（像素为2x）
- 50*50是 50 / 3.75 = 13.3333vw
-
注意事项：
- 涉及到大量除法，还是适应LESS搭配更好点
- 本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh很少使用。
- 兼容性：https://caniuse.com/
3. 案例：b站移动端首页
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="fonts/iconfont.css">
<title>bibititle>
head>
<body>
<header>
<div class="top">
<div class="left">
<i class="iconfont Navbar_logo">i>
div>
<div class="right">
<a href="#">
<i class="iconfont ic_search_tab">i>
a>
<a href="#"><img src="./images/login.png" alt="">a>
<a href="#"><img src="./images/download.png" alt="">a>
div>
div>
<div class="bottom">
<div class="tab">
<ul>
<li class="active">首页li>
<li>动画li>
<li>番剧li>
<li>前端li>
<li>音乐li>
ul>
div>
<div class="more">
<i class="iconfont general_pulldown_s">i>
div>
div>
header>
<section>
<a href="#">
<div class="pic">
<img src="./images/1.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>111.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>13.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
新赛季蒙恬上分简直无敌，搭配新赛季铭文贼强
div>
a>
<a href="#">
<div class="pic">
<img src="./images/2.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>1211.5万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>142.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
《自制动画/鬼灭之刃》耗时两个月！继国缘一对战黑死牟！
div>
a>
<a href="#">
<div class="pic">
<img src="./images/3.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>851.8万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>132.5万span>
p>
div>
div>
<div class="txt ellipsis-2">
有一整颗章鱼的“章鱼烧”！一口一个太满足了！
div>
a>
<a href="#">
<div class="pic">
<img src="./images/4.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>511.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>232.9万span>
p>
div>
div>
<div class="txt ellipsis-2">
竖屏 | 是夏天的味道吗？ | ring ring ring
div>
a>
<a href="#">
<div class="pic">
<img src="./images/5.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>2101.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>332.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
白敬亭：TM你改我歌词是吧？！
div>
a>
<a href="#">
<div class="pic">
<img src="./images/6.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>105.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>32.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
Bet On Me
div>
a>
<a href="#">
<div class="pic">
<img src="./images/7.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>888.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>135.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
“至今为止 请睁眼看清你的英雄”
div>
a>
<a href="#">
<div class="pic">
<img src="./images/8.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>51.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>12.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
【路辰/双声道/黑化】Crazy In Love
div>
a>
<a href="#">
<div class="pic">
<img src="./images/9.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>1111.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>132.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
花木兰全面教学
div>
a>
<a href="#">
<div class="pic">
<img src="./images/10.webp" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu">i>
<span>11.2万span>
p>
<p>
<i class="iconfont icon_shipin_danmushu">i>
<span>1.2万span>
p>
div>
div>
<div class="txt ellipsis-2">
高 手 总 是 难 以 预 判 ！！！
div>
a>
section>
<div class="btn">
<a href="#">
<i class="iconfont Navbar_logo">i>
<span>打开App，看你感兴趣的视频span>
a>
div>
body>
html>
index.less
// 声明变量
@v_width: 3.75vw;
@color: #fb7299;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
// 约定 iphone6 375px 为基准设备 1vw = 3.75px
// 头部
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: (84 / @v_width);
background-color: #fff;
z-index: 999;
// top
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: (44 / @v_width);
padding: 0 (12 / @v_width) 0 (18 / @v_width);
.left {
i {
font-size: (28 / @v_width);
color: @color;
}
}
.right {
display: flex;
i {
font-size: (22 / @v_width);
color: #ccc
}
a:nth-child(2) {
width: (24 / @v_width);
height: (24 / @v_width);
margin-left: (24 / @v_width);
}
a:nth-child(3) {
width: (72 / @v_width);
height: (24 / @v_width);
margin-left: (24 / @v_width);
}
}
}
// bottom
.bottom {
display: flex;
height: (40 / @v_width);
border-bottom: 1px solid #eee;
.tab {
flex: 1;
height: (39 / @v_width);
ul {
display: flex;
li {
line-height: (39 / @v_width);
margin: 0 (16 / @v_width);
border-bottom: 2px solid transparent;
font-size: (14 / @v_width);
// &.active相当于.bottom.tab.active
&.active {
border-bottom-color: @color;
}
}
}
}
.more {
width: (40 / @v_width);
height: (40 / @v_width);
text-align: center;
line-height: (40 / @v_width);
i {
font-size: (20 / @v_width);
color: #ccc;
}
}
}
}
// 视频列表
section {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: (90 / @v_width);
a {
width: (172 / @v_width);
height: (134 / @v_width);
margin-bottom: (10 / @v_width);
.pic {
position: relative;
height: (97 / @v_width);
.count {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
width: 100%;
padding: (8 / @v_width);
background-image: linear-gradient(to top,rgba(0,0,0,0.6),rgba(0,0,0,0));
color: #fff;
font-size: (12 / @v_width);
i {
vertical-align: middle;
}
}
}
.txt {
margin-top: (6 / @v_width);
font-size: (12 / @v_width);
color: #333;
}
}
}
// 底部
.btn {
position: fixed;
left: 0;
bottom: (20 / @v_width);
height: (36 / @v_width);
width: 100%;
padding: (12 / @v_width);
a {
display: block;
height: (36 / @v_width);
background-color: @color;
border-radius: (18 / @v_width);
color: #fff;
font-size: (14 / @v_width);
text-align: center;
line-height: (36 / @v_width);
}
}
