移动端的特点
1.移动端与PC端网页的不同点
‘PC屏幕大，有固定的版心
‘手机屏幕小，网页宽度多数为100%
如何使用谷歌模拟器调试移动端网页？
步骤：
1.打开网页，右键F12打开检查打开调试中心
2.选择移动端图标
谷歌移动端调试步骤
谷歌浏览器调试移动端网页
分辨率的解释：
屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
物理分辨率/设备分辨率：指的就是当前屏幕所拥有的的物理像素点的个数，是不可以被软件（驱动）改变的
逻辑分辨率：指的是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，是可以被软件改变的
物理像素点：显示图像最小单位
视口
视口的作用：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
1.布局视口：移动端默认的页面宽度是980px
2.理想视口：
理想视口标签：meta:viewport
width=device-width-----设备的宽度跟视口（页面）宽度相等
initial-scale=1.0-----表示现在写多少像素，就给用户展示多少像素
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱(小米方案)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
二倍图设计稿尺寸为物理逻辑分辨率的2倍，所以用像素大厨打开二倍图的时候，要勾选2X选项
像素大厨打开二倍图
百分比布局（流式布局）
百分比布局也叫流式布局，是以前为解决在移动端上打开网页的一种解决方式，现在已淘汰，作为了解学习。
效果：宽度自适应，高度固定。
案例：京东下导航栏
代码：
<!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">
<title>jd</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: skyblue;
}
footer a {
/* 设置宽高，并一行显示多个 */
float: left;
width: 20%;
height: 50px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<!-- 有语义化的标签，header标签表示头部，footer标签表示底部 -->
<footer>
<a href=""><img src="./images/1.png" alt=""></a>
<a href=""><img src="./images/2.png" alt=""></a>
<a href=""><img src="./images/3.png" alt=""></a>
<a href=""><img src="./images/4.png" alt=""></a>
<a href=""><img src="./images/5.png" alt=""></a>
</footer>
</body>
</html>
效果图：
京东下导航栏
Flex布局
flex布局也叫弹性布局，有灵活，布局快的特点
flex布局代码：
display：flex; ----- 转换为弹性布局
flex布局与float浮动的区别：弹性布局没必要清除浮动，布局也更加灵活
如何添加弹性布局？
display：flex;添加了此标签的元素称为弹性容器
特点：默认宽度和父元素一样宽，默认高度由内容撑开。
弹性容器内的子元素（亲儿子元素）称为弹性盒子
特点：
1.默认宽度由内容撑开，默认高度为父元素高度（侧轴方向默认是拉伸的）
2.没有块级、行内、行内块元素之分，统统都是弹性盒子（可以设置宽高并一行显示多个）
3.默认不换行，宁愿牺牲自己跨度，都不会自动换行
结构：
弹性盒子结构
主轴对齐方式
使用justify-content调节元素在主轴对齐方式
语法：justify-content：属性值;
justify-content属性值以及作用
标红色的为工作中常用的，前两个属性值基本上不用
center
space-around效果图：
space-around
space-between效果图：
space-between
space-evenly效果图：
space-evenly
侧轴对齐方式
使用align-items调节元素在侧轴的对齐方式
语法：align-items/self：属性值；
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
侧轴属性值
标红色的为工作中常用的，前两个属性值基本上不用
侧轴对齐方式效果图
如果子盒子不给高度，侧轴默认对齐方式：stretch
效果图：
侧轴默认对齐方式stretch
伸缩比
给弹性盒子添加flex
1.所有的弹性盒子都添加flex,均分弹性容器的宽度；如果flex的值不同则666根据比例分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1；---占据父元素剩余的宽度
需求，父盒子宽度按照1:2:3去分配给子盒子
.box .li {
flex: 1;
}
.box .san {
flex: 2;
}
.box .zh {
flex: 3;
}
flex
利用flex布局实现水平垂直居中
问题1：能否用浮动？-----浮动不会和弹性布局使用
问题2：设置弹性布局后能否用定位？-----可以。
基础班学的属性，除了浮动不会跟弹性布局一块用以外，其他的属性都可以在弹性布局内使用。
代码：
<!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" />
<title>Document</title>
<style>
.box {
display: flex;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
margin-left: 100px;
width: 400px;
height: 400px;
background: #6cf;
}
.son {
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
弹性布局实现水平、垂直居中
综合案例
使用flex布局模型快速开发网页（小兔鲜案例）
代码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">
<title>订单</title>
<!-- 1.引入第三方资源 -->
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<!-- 2.引入当前页面css文件 -->
<!-- a.引入base.css -->
<link rel="stylesheet" href="./css/base.css">
<!-- b.引入当前页面的css文件 -->
<link rel="stylesheet" href="./css/order.css">
</head>
<body>
<!-- 用户信息模块info -->
<div class="info common ">
<!-- 地址字体图标 -->
<i class="iconfont icon-location icon1"></i>
<!-- 信息详情 -->
<div class="details">
<p><span>林丽</span> <em>18500667882</em></p>
<p class="twolines">北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# 北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#</p>
</div>
<!-- 大于号字体图标 -->
<i class="iconfont icon-more icon2"></i>
</div>
<!-- 商品信息 goods -->
<div class="goods common">
<!-- 左 -->
<img src="./uploads/pic.png" alt="">
<!-- 右 -->
<div>
<!-- 右1 -->
<div class="title">
<p class="twolines">康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温</p>
<i class="iconfont icon-x"></i>
<span>1</span>
</div>
<!-- 右2 -->
<p class="tags">粉色 红外体温计</p>
<!-- 右3 -->
<div class="price">
<span><em>￥</em>266</span>
<del><em>￥</em>299</del>
</div>
</div>
</div>
<!-- 卡片信息 card -->
<div class="card common">
<ul>
<li>
<p>配送方式</p>
<p>顺丰快递</p>
</li>
<li class="message">
<p>买家备注</p>
<p class="ths">希望可以尽快发货，谢谢~</p>
</li>
<li>
<p>支付方式</p>
<p>支付宝<i class="iconfont icon-more"></i></p>
</li>
</ul>
</div>
<!-- 卡片2 -->
<div class="card common">
<ul>
<li>
<p>商品总价</p>
<p>￥299.00</p>
</li>
<li>
<p>运费</p>
<p>￥0.00</p>
</li>
<li>
<p>折扣</p>
<p class="money">-￥30</p>
</li>
</ul>
<!-- 底部模块 footer -->
<footer>
<div class="add">
<em>合计：</em>
<em>￥</em>
<em>266</em>
<em>.00</em>
</div>
<a href="#">去支付</a>
</footer>
</div>
</body>
</html>
CSS代码(此处把base代码跟页面代码放在一起)：
base代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 sans-serif;
color: #333;
}
li {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
display: block;
text-decoration: none;
color: #333;
/* a链接被点击的时候，会出现一个默认的半透明灰色背景，为了去除这个背景 */
-webkit-tap-highlight-color: transparent;
}
img {
width: 100%;
/* 去除图片下方的空白缝隙，垂直对齐方式 */
vertical-align: middle;
}
input,
button {
border: 0;
/* 去除获取焦点的时候的外边框 */
outline: 0;
color: #333;
}
页面代码：
body {
background-color: #f7f7f8;
padding: 12px 11px 79px;
}
/* 存放每张卡片公共样式 */
.common {
background-color: #fff;
border-radius: 5px;
}
/* 存放文字溢出两行以省略号显示 */
.twolines {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 用户信息模块info */
.info {
/* 添加弹性布局 */
display: flex;
/* 主轴方向 jcsb*/
justify-content: space-between;
/* 侧轴方向 aic*/
align-items: center;
height: 85px;
}
/* 字体图标 */
.info .icon1 {
width: 30px;
height: 30px;
border-radius:15px;
line-height: 30px;
color: #fff;
text-align: center;
font-size: 17px;
margin: 0 11px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
}
.info .icon2 {
width: 44px;
height: 44px;
color: #808080;
font-size: 11px;
text-align: center;
line-height: 44px;
}
/* 信息详情 */
.info .details {
flex: 1;
}
.details span {
font-size: 15px;
color: #262626;
}
.details em {
font-size: 13px;
margin-left: 23px;
}
.details p:last-child {
font-size: 12px;
}
/* 商品信息 */
.goods {
display: flex;
/* 主轴jcsb */
/* justify-content: space-between; */
/* 侧轴aic */
align-items: center;
height: 107px;
margin: 9px 0 6px;
}
/* 左 */
.goods img {
width: 85px;
height: 85px;
margin: 0 14px 0 11px;
}
/* 右 */
/* 右1 */
.title {
display: flex;
align-items: center;
}
.title p {
font-size: 13px;
color: #262626;
width: 192px;
}
.title i {
font-size: 7px;
color: #333;
margin-left: 22px;
}
.title span {
font-size: 15px;
color: #262626;
margin-bottom: 4px;
}
/* 右2 */
.goods .tags {
width: 95px;
font-size: 11px;
color: #888;
background-color: #f7f7f8;
text-align: center;
margin-top: 6px;
}
/* 右3 */
.price span {
color: #cf4444;
}
.price span em {
font-size: 9px;
}
.price del {
color: #999;
font-size: 12px;
margin-left: 14px;
}
.price del em {
font-size: 9px;
}
/* 卡片 */
.card {
padding: 0 14px;
margin-bottom: 10px;
}
.card li {
display: flex;
/* 主轴一左一右 */
justify-content: space-between;
height: 42px;
/* 侧轴居中 */
align-items: center;
font-size: 13px;
color: #262626;
}
.card .message {
justify-content: flex-start;
}
.card .message .ths {
color: #989898;
margin-left: 19px;
font-size: 12px;
}
.card i {
color: #808080;
font-size: 11px;
}
.card .money {
color: #cf4444;
}
/* 底部模块 */
footer {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
height: 79px;
width: 100%;
background-color: #fff;
padding: 0 10px;
}
footer .add {
/* 要清除换行导致的空格留下的距离，可以给父级添加fz0 */
font-size: 0;
}
footer em:first-child {
font-size: 11px;
color: #1e1e1e;
}
footer em:nth-child(2) {
font-size: 11px;
}
footer em:nth-child(3) {
font-size: 20px;
font-weight: 700;
color:#cf4444;
}
footer em:last-child {
font-size: 18px;
font-weight: 700;
color:#cf4444;
}
footer a {
width: 91px;
height: 35px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 3px;
font-size: 13px;
color: #fff;
text-align: center;
line-height: 35px;
}
效果图：
小兔鲜订单案例
