移动端常见布局

移动端常见布局及其相关概念

一、视口

什么是视口呢？

----视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

1.布局视口：
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

2.视觉视口：
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

3.理想视口：
----为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸，简单理解就是设备有多宽，我们布局的视口就多宽

常见布局

1、流式布局、flex弹性布局、vw、less+rem+媒体查询布局、混合布局----（单独制作移动端页面）主流
2、媒体查询、bootstrap----（响应式式页面兼容移动端）其次

一、流式布局

流式布局也称百分比布局

1.流式布局，就是百分比布局，也称非固定像素布局。
2.通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
3.流式布局方式是移动web开发使用的比较常见的布局方式。

二、flex布局（重要）

1.flex的优缺点

1.操作方便，布局极为简单，移动端应用很广泛
2.PC 端浏览器支持情况较差
3.IE 11或更低版本，不支持或仅部分支持

2.布局原理

----flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

flex布局又称为：

伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

3.常见父项属性

• flex-direction：设置主轴的方向–row(左到右)–column(上到下)
• justify-content：设置主轴上的子元素排列方式（设置主轴）
• flex-wrap：设置子元素是否换行 --wrap
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

设置主轴上的对齐方式：justify-content
justify-content：space-between（先两边贴边 再平分剩余空间）

justify-content：space-around（每一个剩余子项，均分剩余空间）

justify-content: space-evenly（子项的之间的宽度缝隙一致）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210117125120271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ND

这里是引用

I3ODE1NQ==,size_16,color_FFFFFF,t_70)
4.flex布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

扩展：

父项也是可以作为子项 flex嵌套
普通的文字 也可以看成是子项

三、移动端屏幕适配 解决方案

屏幕适配的公式：
手机屏幕的宽 / 设计稿的宽度 = 手机中div的宽 / 设计稿中 div宽度
手机div的宽（？未知）

1.vw：是一个相对长度单位，100vw等于屏幕的宽
2.rem：是一个相对单位，基准是相对于html元素的字体大小
3.媒体查询：是CSS3新语法

1.使用 @media 查询，可以针对不同的媒体类型定义不同的样式
2.@media 可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范：

用 @media 开头 注意@符号
mediatype 媒体类型
关键字 and not only media feature
媒体特性 必须有小括号包含

4.less、sass、stylus：是css的预处理器，能够提高前端网页css的开发效率----学会一种就好，其他的语法都差不多

4.1 less基础

4.2 less变量
语法：@变量名: 值; @color:red;

必须有@为前缀
结尾必须带分号
不能包含特殊字符
不能以数字开头
大小写敏感

4.3 less嵌套

4.4 less运算
----任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/Less 里面写/
@width: 10px + 5;
div {
border: @width solid red;
}
/生成的css/ div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */ width: (@width + 5) * 2;

4.5 less 混合 mixin 函数

对一段代码进行封装，然后进行调用

4.5 less导入（比较少用）

1.导入的语法 @import “less文件”;
2.导入语句的结尾必须带分号;
3.less的后缀名可以省略
4.导入的文件类型必须为less文件，如果没有less文件可以手动将css文件的后缀改为less @import后面一定要加空格！！！
5.vscode会检测导入的路径，如果不正确则会红色波浪线警告，并且无法编译less文件为css

5、rem适配方案

6、响应式布局（bootstrap）

6.1 优点：

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

6.2 布局容器：

6.3 bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
• 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

栅格嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。