-
移动端特点
-
百分比布局
-
Flex布局
移动端原理
移动端特点
移动端和PC端有什么区别
PC端：定版心
页面中的元素宽高 几乎都是px单位！！ 定死大小
移动端：不用定版心
元素的大小 很少使用px单位 都会用相对长度单位 百分比单位 rem 、vw、vh(没学过) 屏幕越大，元素越大
早期移动端布局：
弊端：不够方便一旦增加了元素方式对应的width代码重新去计算
百分比布局也叫流式布局(宽度自适应，高度固定)
主流的移动端布局：flex!!!好用 方便 简单
屏幕知识（了解）
1、屏幕尺寸
指的是屏幕对角线的长度，一般用英尺来度量
2、分辨率
物理分辨率：生产屏幕时就固定的，不可改变的
逻辑分辨率：由软件(驱动)决定的
注意：网页制作参考的是逻辑分辨率
3、视口
①布局视口
②理想视口
meta标签对网页设置 设置语言、设置seo关键字
name告诉meta标签要设置什么地方viewport视口
content设置视口的那些内容
-
width=device-width 视口的宽度等于屏幕的宽度
-
initial-scale=1.0 设置网页打开的时候缩放的倍数1.0倍
-
maximum-scale=1 假如允许缩放，最大缩放的倍数 1.0
-
minimum-scale=1 假如允许缩放，最小缩放的倍数 1.0
-
user-scalable=no 控制是否允许用户双击、手指、捏合的手势来缩放网页
① no 不允许 靠不同厂商的浏览器来自动缩放 脱离了开发者的控制
② 真要缩放 开发者自己写js代码来控制做到不同浏览器用同样的手势功能一样
-
工作的用法
注意：代码存在一些区别无所谓，功能都一样没必要去纠结，直接使用即可。
①直接用vscode生成
②自己再写一次，快捷写法：meta：vp + tab
③其他公司的网页视口代码拷贝过来即可
4、多倍图
目前前端主流看待多倍图 解决方式
①市场上的手机不会有1倍清晰的屏幕
②各大it公司直接使用高清图 3倍图或者2倍即可
图片使用3倍 --->3倍清晰屏幕 完美
图片使用3倍 --->2倍清晰屏幕 至多只能感受2倍清晰 浪费流量去加载不能直接显示完毕3倍图
图片使用3倍 --->1倍清晰屏幕 手机淘汰 很少
=========================================
图片使用2倍 --->3倍清晰屏幕 只能感受到2倍清晰
图片使用2倍 --->2倍清晰屏幕 完美
图片使用2倍 --->1倍清晰屏幕 手机淘汰
③前端在写代码的时候还是和以前一样美工给什么图片我们直接通过src属性使用图片
srcset属性很少用！！！
<img srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.png 3x" />
Flex布局(重点)
特点
①是一种浏览器提倡的布局模式
②布局网页更简单、灵活
③避免浮动脱标问题
使用Flex布局后的变化
1、置 div 变成 flex 盒子（弹性盒子） display:flex; df
2、div中的子元素发生一些改变 ①设置了flex的盒子 称之为 父项 ②盒子里面的子元素 称之为 子项
3、具体变化 ①不再区分什么 块元素、行内元素、行内块元素 全部都可以设置宽和高 ②子项 默认的宽度和高度 宽度：由内容撑开 高度：等于父项的高 ③子项 使用浮动没有效果 无效 使用定位、margin、transform都有效 ④默认情况下 子项总宽度大于 父项的宽 也不会换行！！！ flex不会换行 只会压缩自身的宽度
-
<style> div{ width: 600px; height: 600px; background-color: #baf; margin: 0 auto; /* 设置 div 变成 flex 盒子 df*/ display: flex; } span{ /* width: 100px; height: 100px; */ background-color: #bfa; } </style> </head> <body> <div> <span>1</span><span>2</span><span>3</span><span>4</span> </div>
Flex布局对齐方式
Flex布局存在主轴 、侧轴(类似excel)
- 主轴 = X轴 = 水平方向 默认主轴X轴
- 侧轴 = Y轴 = 垂直方向
- 给父项添加的 父项中设置 主轴对齐方式
父项
设置主轴对齐方式
语法：
justify-content: ;
- 左对齐 flex-start
- 右对齐 flex-end
- 居中对齐 center
- 先两侧对齐再间隔存放space-between；（简写sb）
5.间隔存放space-around；（简写sd）
6.绝对平均space-evenly；(简写sv)
设置侧轴对齐方式
作用：设置元素上下的位置·
1、单行元素
语法： align-items
<style>
div{
margin: 100px auto;
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
/* 侧轴对齐方式（单行） */
/* 上对齐 */
align-items: flex-start;
/* 下对齐 */
align-items: flex-end;
/* 垂直方向居中对齐 */
align-items: center;
}
span{
width: 100px;
height: 100px;
background-color: #baf;
}
</style>
<body>
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</body>
2、多行元素
语法:align-content
<style>
div{
margin: 100px auto;
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
flex-wrap: wrap;
/* 设置侧轴对齐方式（多行）：align-content*/
/*上对齐*/
align-content: flex-start;
/* 下对齐 */
align-content: flex-end;
/* 垂直居中对齐 */
align-content: center;
/* 上下两边对齐 */
align-content: space-between;
/* 上下间隔存放 */
align-content: space-around;
/* 绝对平均 */
align-content: space-evenly;
}
span{
width: 100px;
height: 100px;
background-color: #baf;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</body>
垂直水平居中对齐
语法：display: flex; justify-content: center; align-items: center;
<style>
div{
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
justify-content: center;
align-items: center;
}
span{
width: 100px;
height: 100px;
background-color: #baf;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
换行属性
默认情况下
①flex不会换行
当子元素的总宽度大于父元素的时候 不会换行
只会挤压子元素的宽度！
②设置换行属性
换行：flex-wrap：wrap；
不换行：flex-wrap：nowrap；
<style>
div{
margin: 100px auto;
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
flex-wrap: wrap;
}
span{
width: 100px;
height: 100px;
background-color: #baf;
}
</style>
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
设置主轴方向
语法：flex-direction
注意：当主轴发生改变后，它们的对齐方式属性也会发生改变 :justify-content: ; //align-items:;
<style>
div{
margin: 100px auto;
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
/* 设置主轴方向 */
/* 默认值，水平方向 从左到右 少用*/
flex-direction: row;
/* 默认值，水平方向 从右到左 少用*/
flex-direction: row-reverse;
/* 从上到下 常用 */
flex-direction: column;
/* 从下到上 少用 */
flex-direction: column-reverse;
}
/* 当主轴发生改变后，它们的对齐方式属性也会发生改变 :justify-content: ; //align-items:;*/
span{
width: 100px;
height: 100px;
background-color: #baf;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
子项
设置子项均分父项的高度
<style>
div{
margin: 0 auto;
width: 600px;
height: 600px;
background-color: #bfa;
display: flex;
align-items: center;
}
span{
width: 100px;
height: 100px;
background-color: #baf;
border: 1px solid slateblue;
/* 设置每个span的宽度都占一份 */
flex: 1;
display: flex;
justify-content: center;
}
/* 单独设置其中一个元素占的位置 */
span:nth-child(2){
flex: 2;
background-color: steelblue;
/* 设置文字居中效果 */
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
子项设置侧轴对齐
作用： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
语法：align-self:center;
align-self: flex-start ;
align-self: flex-end ;
注意：与侧轴相关
