移动端布局
一、移动端基础
1.PC和移动网页不同点
（1）PC屏幕大，网页固定版心
（2）手机屏幕小，网页宽度多数为100%
2.分辨率
2.1 屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量
2.2 分辨率总结
（1）硬件分辨率（出厂设置）
（2）缩放调节的分辨率(软件设置)
2.3 分辨率分类
（1）物理分辨率是生产屏幕时就固定的，它是不可被改变的
（2）逻辑分辨率是由软件（驱动）决定的
3.视口
3.1 使用mete标签设置视口宽度，制作适配不同设备宽度的网页
3.2 网页宽度和设备宽度(分辨率)相同
<meta name="viewport"content="width=device-width, initial-scale=1.0">
4. 二倍图
图片分辨率，为了搞分辨率下图片不会模糊失真
5.百分比布局
5.1 百分比布局，也叫流式布局
5.2 效果：宽度自适应，高度固定
二、Flex布局
1. Flex布局/弹性布局：
（1）是一种浏览器提倡的布局模型
（2）布局网页更简单、灵活
（3）避免浮动脱标的问题
2.Flex组成
2.1 作用：
（1）基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
（2）flex布局非常适合结构化（左右结构）布局
2.2 设置方式
父元素添加dispaly : flex, 子元素可以自动的挤压或拉伸
2.3 组成部分
（1）弹性容器
（2）弹性盒子
（3）主轴
（4）侧轴/交叉轴
3.主轴对齐方式
3.1修改主轴对齐方式属性：justify-
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box ul li{
list-style: none;
}
.box{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid #000;
}
.box ul{
display: flex;
/* 居中排列 */
justify-content: center;
/* 间距在弹性盒子中间 */
justify-content: space-between;
/* 所有地方间距相等 */
justify-content: space-evenly;
/* 子级间距是父级距离的两倍 */
justify-content: space-around;
}
.box li{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
4.侧轴对齐方式
4.1修改侧轴对齐方式属性：
（1）align-items（添加到弹性容器）
（2）align-self:控制某个弹性盒子在侧轴的对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box ul li{
list-style: none;
}
.box{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid #000;
}
.box ul{
width: 400px;
height: 200px;
display: flex;
align-items: center;
/* 拉伸排列 */
align-items: stretch;
}
/* 单个居中 */
.box ul li:nth-child(2){
align-self: center;
}
.box li{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
5.伸缩比
5.1属性：flex:值
5.2 取值分类：数值（整数）
5.3 注意：
只占用父级盒子剩余尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box ul li{
list-style: none;
}
.box{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid #000;
}
.box ul{
width: 400px;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
/* 拉伸排列 */
align-items: stretch;
/* 单个居中 */
}
.box ul li:nth-child(2){
align-self: center;
}
.box ul li:nth-child(3){
/* 占用父级剩余尺寸的份数 */
flex: 1;
}
.box ul li:nth-child(1){
flex: 2;
}
.box li{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
6. 修改主轴方向
6.1 主轴默认是水平方向，侧轴默认是垂直方向
6.2 修改主轴方向属性：flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认值） |
| column | *** 列，垂直** |
| row-reverse | 行，从有向左 |
| colunm-reverse | 列，从下向上 |
<head>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.box li{
dispaly:flex;
/*修改主轴方向*/
flex-direction:column;
width:80px;
height:80px;
border:1px solid red;
}
.box img{
width:32px;
height:32px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./image/media.png">
<span>媒体</span>
</li>
</ul>
</div>
</body>
7.主轴方向和对齐方式
<head>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.box li{
dispaly:flex;
/*1.先确定主轴方向；
2.再选择对应的属性实现主轴或侧轴的对齐方式*/
/*修改主轴方向*/
flex-direction:column;
/*视觉效果：实现盒子水平居中*/
align-items:center;
/*视觉效果：实现盒子垂直居中*/
justify-content:center;
width:80px;
height:80px;
border:1px solid red;
}
.box img{
width:32px;
height:32px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./image/media.png">
<span>媒体</span>
</li>
</ul>
</div>
</body>
8.弹性盒子布局
8.1 弹性盒子换行显示：flex-wrap:wrap;
<head>
<style>
*{
margin:0;
padding:0;
}
.box{
display:flex;
/*默认值，不换行*/
flex-wrap:nowrap;
/*弹性盒子换行*/
flex-wrap: wrap;
height:500px;
border: 1px solid red;
}
.box div{
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box">
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
</div>
</body>
8.2 调整行对齐方式：align-content
取值与justify-content基本相同
三、rem移动端适配
1.rem基本使用
1.1网页效果
屏幕宽度不同，网页元素尺寸不同（等比例缩放）
1.2 px单位和百分比布局
（1）px单位是绝对单位
（2）百分比布局特点宽度自适应，高度固定
1.3 rem单位
（1）相对单位
（2）rem单位是相对于HTML标签的字号计算结果
（3）1rem= 1HTML字号大小
<head>
<style>
*{
margin:0;
padding:0;
}
/*2rem = 1HTML标签字号大小*/
html{
font-szie:20px;
}
.box{
width:5rem;
height:3rem;
background-color:#fff;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
2.媒体查询
2.1 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
答：媒体查询
2.2 媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
写法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-poNTFtBg-1659430916724)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220605164628504.png)]
3. 移动适配
3.1目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SdQ0HKeW-1659430916725)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220605171806593.png)]
<head>
<style>
*{
margin:0;
padding:0;
}
/*2rem = 1HTML标签字号大小*/
@media (width:320px){
html{
font-size:32px;
}
}
@media (width:375px){
html{
font-size:37.5px;
}
}
@media (width:414px){
html{
font-size:41.4px;
}
}
/*书写盒子尺寸，单位rem*/
.box{
width:5rem;
height:3rem;
background-color:#fff;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
4. 布局流程
4.1 单位尺寸
（1）确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 > 确定参考设备宽度(视口宽度) > 确定基准根字号（1/10视口宽度）
（2）rem单位的尺寸
rem单位的尺寸 = px单位数值/ 基准根字号
@media (width:375px){
html{
font-size: 37.5px;
}
}
.box{
/* 68 / 37.5 */
width: 1.813rem;
height: 0.773rem;
background-color:pink;
}
5.flexible移动适配
5.1 flexible.js是手淘开发出的一个用来适配移动端的js框架
5.2 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
<!--引入flexible-->
<script scr="../js/flexible.js"> </script>
四、Less语法
1.Less简介
1.1 Less是一个CSS预处理器,Less文件后缀是.less
1.2 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的css文件
1.3 注释：
（1）单行注释
语法：//注释内容
快捷键：ctrl + /
（2）块注释
语法：/注释内容/
快捷键：shift + alt + A
2.Less计算
2.1 运算：
（1）加、减、乘直接书写计算表达式
（2）除法需要添加小括号或.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FX9YFL8r-1659430916726)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220605201254262.png)]
3.Less嵌套
.father{
width:100px;
.son{
color:pink;
// & 表示当前选择器
&:hover{
color: red;
}
}
}
4.Less变量
4.1 网页中，文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？
答：把颜色提前存到一个容器，设置属性值为这个容器名
变量：存储数据，方便使用和修改
语法：
定义变量：@变量名：值
使用变量：CSS属性：@变量名;
// 1.定义 2.使用
@color: red;
.box{
color: @color;
}
.father{
color:@color;
}
.aa{
color:@color;
}
5.导入
5.1 开发网站时，网页如何引入公共样式？
答：CSS：书写link标签 Less：导入
导入：@import ‘文件路径’;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bm2LBgkF-1659430916726)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220606193247785.png)]
五、vw/vh移动适配
相对单位
相对视口的尺寸计算结果
vw : viewport width
1vw = 1 / 100视口宽度
vh : viewport height
1vh = 1 / 100 视口高度
*{
margin:0;
padding:0;
}
/*1. vw = 1 / 100视口宽度*/
.box {
width: 50vw;
height: 30vw;
background-color: pink;
}
/*2. vh = 1 / 100视口高度*/
.box {
width: 50vh;
height: 30vh;
background-color:pink;
}
2.vw移动适配
2.1 vw单位尺寸
（1）确定设计稿对应的vw尺寸(1 / 100视口宽度)
查看设计稿宽度 > 确定参考设备宽度(视口宽度) > 确定vw尺寸(1 / 100视口宽度)
（2）vw单位的尺寸 = px单位数值 / (1 / 100视口宽度)
// 68 * 29 --vw
.box{
width:(68 / 3.75vw);
height:(29 / 3.75vw);
background-color:pink;
}
2.2 vh移动适配
// 68 * 29 --vh
.box{
width:(68 / 6.67vh);
height:(29 / 6.67vh);
background-color:green;
}
2.3 全面屏影响
注意：vh与vw不能混用
口高度**
*{
margin:0;
padding:0;
}
/*1. vw = 1 / 100视口宽度*/
.box {
width: 50vw;
height: 30vw;
background-color: pink;
}
/*2. vh = 1 / 100视口高度*/
.box {
width: 50vh;
height: 30vh;
background-color:pink;
}
2.vw移动适配
2.1 vw单位尺寸
（1）确定设计稿对应的vw尺寸(1 / 100视口宽度)
查看设计稿宽度 > 确定参考设备宽度(视口宽度) > 确定vw尺寸(1 / 100视口宽度)
（2）vw单位的尺寸 = px单位数值 / (1 / 100视口宽度)
// 68 * 29 --vw
.box{
width:(68 / 3.75vw);
height:(29 / 3.75vw);
background-color:pink;
}
2.2 vh移动适配
// 68 * 29 --vh
.box{
width:(68 / 6.67vh);
height:(29 / 6.67vh);
background-color:green;
}
2.3 全面屏影响
注意：vh与vw不能混用
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
