移动端常用布局
Posted s-w-f
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端常用布局相关的知识，希望对你有一定的参考价值。
很长一段时间没有写静态页面布局，很多东西都开始模糊了，趁着最近做了一个小项目，把一些静态页面布局的知识简单梳理一下，加深自己的印象
一、流式布局——flex布局
1.流式布局的特征
（1）宽度自适应，高度固定，但是不是百分百还原设计图
（2）图标和字体的大小都是固定的，并不是所有的东西都是自适应的
（3）对于大的banner图（主要指轮播图），宽度自适应
2.流式布局的类型
（1）左侧固定，右侧自适应
（2）右侧固定，左侧自适应
（3）两侧固定，中间自适应
（4）等分布局
3-flex布局（弹性布局、伸缩布局）
给一个盒子设置了属性：display：flex； 则该盒子就变成了一个弹性盒子，而弹性盒子有自己的布局规则
(1)弹性盒子的主轴排列方式
justify-content——取值：flex-start 、flex-end、center、space-between、space-around
常用取值：space-between 均分对齐排列，两边贴边；space-around 均分对齐排列，不贴边
（2）flex布局的换行问题
flex布局和浮动不同，当多个盒子设置成左或右浮动时，如果一行排放不下时，会自动掉下去。但是flex布局多行排放需要手动设置flex-wrap属性
取值：
nowrap默认值，不换行，此时不管有多少的子盒子，都排在一行，盒子越多，每个盒子所占的主轴空间越小；
wrap 当父盒子宽度不够时就会换行
（3）flex属性：是使用flex实现自适应布局时重要属性
作用：当不想给盒子设置固定的宽度时，设置flex属性来按比例给盒子分配宽度，从而实现了盒子宽度的自适应（随父盒子宽度的改边而改变）
取值:是数值
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 600px; height: 300px; border: 1px solid red; margin:20px auto; display: flex; } .son1,.son2,.son3{ /* 三个子盒子宽度相等 */ flex:1; height: 100px; background: green; } .son2{ /* flex:2 son1和son3占父盒子宽度的1/4 son2占父盒子的1/2*/ background: pink; } </style> </head> <body> <div class=box> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> </div> </body> </html>
二、响应式布局——rem布局
rem：是一个长度单位，会根据根元素(html)字体大小换算
rem布局相对于flex布局的优点是：（1）能够让整个页面的字体和图标自适应，而且rem布局能够适配所有的屏幕，（2）不用管设计图的大小，flex布局要注意二倍图、三倍图
rem布局原理：因为rem的基准点是根元素html的字体大小，因此给不同屏幕的html设置不同的font-size大小，就能使不同屏幕的布局元素得到适配
适配不同屏幕的方法：rem + 媒体查询
rem布局开发的步骤：（1）给拿到的设计图固定一个font-size，推荐定为100px或50px，便于计算;（2）使用媒体查询，等比例的设置每一屏幕的html的字体大小，
比例关系：设计固定的font-size/设计图的大小 =当前屏幕的font-size/当前屏幕的大小；（3）在设计图上量出来的盒子大小全部转换为rem单位即可，不需要考虑设计图是否是二倍图、三倍图。
/*rem + 媒体查询：以设计图：640px font-size:100px 为例 */
/* 适配320px~400px的屏幕 */
@media(min-width:320px){
html{font-size:50px}
}
/* 适配400px~640px的屏幕 */
@media(min-width:400px){
html{
font-size: 62.5px;
}
}
/* 适配640px以上的屏幕 */
@media(min-width:640px){
html{
font-size:100px;
}
}
/*注意点:使用媒体查询适配不同屏幕时，屏幕大小要从小的往大的写，如上，因为后写的会覆盖先写的*/
以上是关于移动端常用布局的主要内容，如果未能解决你的问题，请参考以下文章