移动Web -06移动端特点
一. 移动端和PC端网页不同点
PC端:
屏幕大，网页固定版心
PC端浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）
移动端 :
手机屏幕小， 网页宽度多数为100%， 是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性
二. 谷歌模拟器
三.分辨率
物理分辨率：硬件所支持的， 屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的
四.二倍图
五.视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。
1.布局视口 layout viewport
2.视觉视口 visual viewport :用户正在看到的网站的区域。注意：是网站的区域。
3.理想视口 ideal viewport:设备有多宽，我的网页就显示有多宽
视口标签
<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"> -->
<!-- 某东推荐视口适配写法: -->
<!-- width=device-width 屏幕宽度=设备宽度 -->
<!-- initial-scale=1.0 缩放倍数 1倍 -->
<!-- maximum-scale=1.0 最大缩放倍数 1倍 -->
<!-- uesr-scalable=0 是否允许用户进行缩放 0和no表示不允许 yes表示允许 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 uesr-scalable=0">
<title>Document</title>
</head>
<body>
</body>
</html>
移动Web -07百分比布局
也叫流式布局
宽度自适应，高度固定。
<style> *{ margin: 0; padding: 0; } .box{ position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; background-color: pink; } .box div{ float: left; width: 20%; height: 50px; } /* 百分比布局(流式布局):宽度要自适应,高度是固定的 */ </style>
1
2
3
4
5
移动Web -08flex布局(弹性布局)
一.flex布局组成方式
弹性容器 弹性盒子 主轴 侧轴 / 交叉轴
二.主轴对齐方式
<style> *{ margin: 0; padding: 0; } .box{ /* {弹性布局 */ display: flex; /* 主轴对齐方式 快捷键jc */ /* 默认值 主轴从起点开始排列 */ justify-content: flex-start; /* 主轴从终点开始排列 */ justify-content: flex-end; /* 居中 */ justify-content: center; /* 子盒子靠边排列,中间距离自适应 */ justify-content: space-between; /* 子盒子1:2划分比例排列 */ justify-content: space-around; /* 子盒子平均分1:1比例排列 */ justify-content: space-evenly; width: 1200px; height: 200px; background-color: pink; margin: 0 auto;
} /* 弹性盒子标准流(margin和padding) 摆在一起 */ .box div{ width: 220px; height: 200px; background-color: blue; } </style>
三.侧轴对齐方式
1.align-items
（添加到弹性容器-父级 ）
2.align-self：
控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）
.box {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
margin: 0 auto;
/* 主轴让内容靠边 */
justify-content: space-between;
/* 侧轴(默认y轴)对齐方式 快捷键:ai */
/* 默认值:拉伸 高和父元素保持一致,宽度由内容撑开 */
align-items: stretch;
/* 默认侧轴上方,起点排列 */
align-items: flex-start;
/* 默认侧轴下方排列,起点排列 */
align-items: flex-end;
/* 侧轴居中 */
align-items: center;
}
四.子盒子水平垂直居中
使用子绝父相定位+margin实现
使用子绝父相定位+位移实现
Flex布局(弹性布局)主轴,侧轴居中
五.flex伸缩比
/* 伸缩比 */
flex: 1;
/* 注意点:
1.伸缩比划分是父元素的大小
2.伸缩比给子元素设置的
3.伸缩比会覆盖你的宽度 */
六.圣杯布局
2边固定宽高 中间宽度自适应
/* 圣杯布局:2边固定宽高 中间宽度自适应 */
.box {
/* 最小宽度:盒子最小宽度不能小于500px */
min-width: 500px;
display: flex;
width: 100%;
height: 50px;
}
.box .left,
.box .right {
width: 50px;
height: 50px;
background-color: pink;
}
/* 中间自适应 */
.box .center {
/* 父元素剩下的距离都是这个盒子的 */
flex: 1;
background-color: yellow;
}
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
