【CSS】关于CSS的⼏种移动端布局⽅式
关于CSS的⼏种移动端布局⽅式
⼀、移动端布局
<meta name="viewport"content="width=device-width,initial-sacle=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
initial-scale 初识缩放⽐
user-scalable ⽤户缩放
css设置文字垂直居中
maximum-scale 最⼤缩放⽐
minimum-scale 最⼩缩放⽐
02.移动布局的分类有哪些？
流式布局（百分⽐布局）
弹性布局（flex）
less+rem+媒体查询布局
响应式布局
03.为什么需要⼆倍图？
（1）物理像素和物理像素⽐
物理像素：即分辨率，屏幕显⽰的最⼩单位
PC端1个px就是⼀个物理像素，⼀⼀对应的关系
但在移动端1个px不是⼀个物理像素，不是对应关系
中间存在⼀个转换⽐，即物理像素⽐
这是因为移动端的物理像素进⾏了压缩，分辨率变⾼
（2）⼆倍图（根据需要确定多倍图）
如果在移动端直接插⼊原图，那么由于物理像素⽐，图⽚也会被放⼤，会变模糊，
因此这⾥需要，先准备原图两倍⼤⼩的图⽚（这⾥的两倍是指物理像素⽐，不⼀定是两倍的），然后⼿动缩⼩为⼀半，那么在移动端显⽰的时候会放⼤为两倍，这次放⼤因为原图先缩⼩了两倍，那么在放⼤时即恢复原图⼤⼩，就不会变模糊
（3）背景⼆倍图
⽤background-size设置图⽚⼤⼩
特别注意精灵图的⼆倍图转换
04.样式初始化
引⼊样式：
⼆、流式布局
01.什么是流式布局？
流式布局
也称百分⽐布局，⾮固定像素布局
宽度⽤百分⽐⾃适应，⾼度⽤像素值固定
搭配最⼤、最⼩宽度
min-width，max-width
02.为什么需要流式布局
浏览器、屏幕尺⼨、分辨率不⼀致
03.流式布局有什么缺陷？
并⾮所有元素都是⾃适应的（⾼度、图⽚、⽂字⼤⼩等都是固定的）
三、初识flex布局
01.⼏个概念
flex布局
即弹性盒⼦布局，是给⽗元素添加flex属性，以控制⼦元素的位置和排列
主轴和侧轴
主轴：即沿着flex元素排列⽅向所在的轴
侧轴：垂直于flex元素排列⽅向的轴
02.⼏个属性
（1）⽗元素的属性
设置再⽗元素中，控制的是⼦元素的排列
1.flex-direction：设置主轴⽅向，设置了其中⼀个为主轴，则另⼀个为侧轴
属性值描述
row⽔平排列，沿着X轴⽅向从左到右排列，默认值,
column垂直排列，沿着Y轴⽅向从上到下排列row-reverse⽔平排列，沿着X轴⽅向从右到左排列
column-reverse垂直排列，沿着Y轴⽅向从下到上排列
2.justify-content：设置在主轴⽅向上的⼦元素的排列⽅式
属性值描述
属性值描述
属性值描述
flex-start沿主轴⽅向从左到右（从上到下）排列，默认值
flex-end从主轴⽅向从右到左（从下到上）排列
center居中对齐
space-around平均分配剩余空间
space-between两端贴边，中间仔平均分配剩余空间
⽔平⽅向：
垂直⽅向：
3.flex-wrap：设置⼦元素是否换⾏
属性值描述
nowrap不换⾏，默认值，缩放⽗元素，同时也会缩放⼦元素
wrap设置换⾏
4.align-items：设置在侧轴⽅向上的单⾏⼦元素的排列⽅式————仅适⽤于单⾏
属性值描述
flex-start从头开始
flex-end从后开始
center在侧轴上居中对齐
stretch拉伸（默认值）
⽔平⽅向：
垂直⽅向：
5.align-content：设置在侧轴⽅向上的多⾏⼦元素的排列⽅式——————适⽤于多⾏
这个属性只有在设置了换⾏的情况下才使⽤，且在单⾏情况下是没有效果的
即需要搭配flex-wrap:wrap;
属性值描述
flex-start
flex-end
center
space-around
space-between
stretch
⽔平⽅向：
垂直⽅向：
6.flex-flow：复合属性，同时设置主轴⽅向和是否换⾏
6.flex-flow：复合属性，同时设置主轴⽅向和是否换⾏
语法：
.father{
/* ⾸先要给⽗元素添加flex */
display: flex;
width: 100%;
height: 200px;
/
* ⽗元素中常见的六种属性 */
/* 1.设置主轴⽅向 */
flex-direction: row;
/* 2.设置在主轴⽅向上的⼦元素的排列⽅式 */
justify-content: center;
/* 3.设置⼦元素是否换⾏ */
flex-wrap: nowrap;
/* 4.设置在侧轴⽅向上的单⾏⼦元素的排列⽅式————仅适⽤于单⾏ */
align-items: center;
/* 5.设置在侧轴⽅向上的多⾏⼦元素的排列⽅式——————适⽤于多⾏ */
align-content: center;
/
* 6.复合属性，同时设置主轴⽅向和是否换⾏ */
/* flex-flow: row nowrap; */
}
（2）⼦元素的属性
属性值描述
flex设置⼦项元素对剩余空间的分配，每⼀个⼦元素项都可单独设置，将所有⼦元素占的份数加起来，即为占⽗元素的⽐例
单独设置⼦项⾃⼰在侧轴上的排列⽅式，包括flex-start;flex-end;center;stretch;baseline;
align-self
order order控制⼦项的排列顺序，越⼩越靠前，默认值为0
语法：
.son{
/* ⼦元素上的属性 */
/* 1.设置元素对剩余空间的分配份数 */
/* 即，将所有⼦元素占的分数加起来，然后占⽗元素宽度的⼏分之⼏ */
flex: 1;
/* 2.设置⼦项⾃⼰在侧轴上的排列⽅式 */
align-self: center;
/* 3.order控制⼦项的排列顺序，越⼩越靠前，默认为0 */
order: inherit;
}
四、关于rem
01.解决问题：
如何让⾼度也⾃适应 ？
02.相关概念
em——是相对于⽗元素的字体⼤⼩进⾏的单位设置，浏览器默认（1em=16px)
rem——即root em，是相对于HTML元素（根）的字体⼤⼩进⾏的单位设置
03.优点
每个页⾯只有1个html标签，可以通过修改HTML中⽂字⼤⼩font-size来改变页⾯中元素的⼤⼩，进⾏整体控制
⽂字⼤⼩随屏幕⼤⼩变化
⾼度⾃适应
⾼度、宽度等⽐例缩放
<适配
是为了让⼀些不能等⽐⾃适应的元素，在设备尺⼨改变时，等⽐例适配当前设备
主要使⽤媒体查询，根据不同设备按⽐例设置html的字体⼤⼩，然后页⾯元素使⽤rem做尺⼨单位，当html字体⼤⼩变化时，元素尺⼨也会发⽣变化，从⽽达到等⽐例缩放的适配
⽤less动态计算并设置html根标签的字体⼤⼩
将设计稿中的元素宽、⾼、位置，按照同等⽐例换算为rem为单位的值
⽅法：
⾸先要有⼀套标准的屏幕尺⼨，⽐如width:750px
然后要设置html标签⾥的⽂字⼤⼩：font-size
在这⾥要先划分屏幕的份数，⽐如划分为15份（其它值也可以），再⽤屏幕尺⼨除以份数，这⾥是 750/15=50px;
那么这⾥html标签⾥的⽂字⼤⼩为：font-size:50px;
那么整个页⾯中的元素尺⼨有这样⼀个换算关系：1rem = 50px
最后，在页⾯中的元素的单位都需要换算成rem单位的，其rem值 = 元素本⾝尺⼨(px)/根标签字体⼤⼩，
如：100x100px的图⽚尺⼨就设置为：2x2rem；
五、关于媒体查询
01.媒体查询——media query
媒体查询可以针对不同的屏幕尺⼨设置不同的样式
02.怎么定义

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。