移动端的特点
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 ---- 禁止用户缩放页面，防止页面布局被打乱(小米方案)
二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
二倍图设计稿尺寸为物理逻辑分辨率的2倍，所以用像素大厨打开二倍图的时候，要勾选2X选项
百分比布局（流式布局）
百分比布局也叫流式布局，是以前为解决在移动端上打开网页的一种解决方式，现在已淘汰，作为了解学习。
效果：宽度自适应，高度固定。
案例：京东下导航栏
代码：
jd
效果图：
Flex布局
flex布局也叫弹性布局，有灵活，布局快的特点
flex布局代码：
display：flex; ----- 转换为弹性布局
flex布局与float浮动的区别：弹性布局没必要清除浮动，布局也更加灵活
如何添加弹性布局？
display：flex;添加了此标签的元素称为弹性容器
特点：默认宽度和父元素一样宽，默认高度由内容撑开。
弹性容器内的子元素（亲儿子元素）称为弹性盒子
特点：
1.默认宽度由内容撑开，默认高度为父元素高度（侧轴方向默认是拉伸的）
2.没有块级、行内、行内块元素之分，统统都是弹性盒子（可以设置宽高并一行显示多个）
3.默认不换行，宁愿牺牲自己跨度，都不会自动换行
结构：
主轴对齐方式
使用justify-content调节元素在主轴对齐方式
语法：justify-content：属性值;
标红色的为工作中常用的，前两个属性值基本上不用
space-around效果图：
space-between效果图：
space-evenly效果图：
侧轴对齐方式
使用align-items调节元素在侧轴的对齐方式
语法：align-items/self：属性值；
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
标红色的为工作中常用的，前两个属性值基本上不用
如果子盒子不给高度，侧轴默认对齐方式：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布局实现水平垂直居中
问题1：能否用浮动？-----浮动不会和弹性布局使用
问题2：设置弹性布局后能否用定位？-----可以。
基础班学的属性，除了浮动不会跟弹性布局一块用以外，其他的属性都可以在弹性布局内使用。
代码：
Document
综合案例
使用flex布局模型快速开发网页（小兔鲜案例）
代码HTML结构：
订单
林丽 18500667882
北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# 北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#
康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温
1
￥266
￥299
-
配送方式
顺丰快递
-
买家备注
希望可以尽快发货，谢谢~
-
支付方式
支付宝
-
商品总价
￥299.00
-
运费
￥0.00
-
折扣
-￥30
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;
}
效果图：