移动端适配

Posted 2020-11-28 imbacool

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端适配相关的知识，希望对你有一定的参考价值。

一、伸缩布局盒模型(弹性盒模型)

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。

主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器（子项目）。

flexbox布局功能主要具有以下几点：

1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5、控制元素在页面上的布局方向；
6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

flexbox模型中的专业术语：

1、主轴和侧轴
2、主/侧轴、主/侧轴方向
3、主/侧轴起点、主/侧轴终点
4、主/侧轴长度
5、伸缩容器和伸缩项目

弹性盒模型的使用：

声明伸缩容器（父元素）说明该内部为弹性盒布局，内部的元素默认全部在主轴方向一行显示，不会换行。

display：-webkit-flex；
display：-moz-flex；
display：-ms-flex；
display：-o-flex；
display：flex；

伸缩项目（子元素），每个子元素所占容器主轴方向大小的比份。

-webkit-flex：1;
-moz-flex：1;
-ms-flex：1;
-o-flex：1;
flex：1;

伸缩容器属性(父容器)：

1、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
row：从左向右
row-reverse：与row相反；
column：从上到下
column-reverse：与column相反；

2、伸缩换行 flex-wrap：
nowrap 不换行默认值，不管超出还是不超出都不会换行
wrap 换行一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse 换行反向主轴是水平时，上下反向，主轴垂直时，左右反向；

3、伸缩流方向与换行 flex-flow
flex-flow：flex-direction || flex-wrap
两个值同时定义或者单独定义都生效

4、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式；
flex-start：伸缩项目向主轴的起始位置靠齐；
flex-end：伸缩项目向主轴的结束位置靠齐；
center：伸缩项目向主轴的中间位置靠齐；
space-between：伸缩项目会在主轴方向平分多余部分；
space-around：伸缩项目会在主轴方向平分多余部分，两端保留一半的空间；

5、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式(单行)
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边；(侧轴的起点位置摆放)
flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边；（侧轴的终点位置摆放）
center：伸缩项目的外边距盒在该行的侧轴上居中放置；（侧轴居中摆放）
baseline：伸缩项目根据伸缩项目的基线对齐；（侧轴方向子项目以基线对齐）
stretch：伸缩项目拉伸填充整个伸缩容器。（伸缩项目不给高度时，默认会被拉伸。）

6、堆栈伸缩行 align-content 定义多个伸缩行在侧轴方向上的对齐方式；往往要与换行同时应用
flex-start：各行向伸缩容器的起点位置堆叠；
flex-end：各行向伸缩容器的结束位置堆叠；
center：各行向伸缩容器的中间位置堆叠；
space-between：各行在伸缩容器中平均分布；
space-around：各行在伸缩容器中平均分布，两端保留一半的空间；
stretch：各行将伸展以占用额外空间。

伸缩项目属性：

1、显示顺序 order 默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。

不定义order的伸缩项目会排到前面。写了order的，属性值越小的在越前面。

order：1；排第一
order：2；排第二

2、伸缩性flex
flex:2;

3、align-self：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。

二、多列布局

css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。

属性：

column-width：定义每列列宽；
类似于最小宽度min-width； auto 自适应；

column-count：定义分列列数；
最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定

column-gap：定义列间距；
不能为负数；

column-rule：定义列边框；
与定义边框一样：2px dashed #ccc;

column-span：定义多列布局中子元素的跨列效果；
通常用于标题；
none 不跨列
all 跨所有列
注意
break-inside：avoid；防断点

三、媒体查询

许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域viewpoint(布局视口)，主要目的就是让页面在智能手机端阅读时不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

如何识别手机尺寸通过设置meta语句：

width 可视区域的宽度；

height 可视区域的高度；

device-width 设备屏幕分辨率的宽度值

initial-scale 初始的缩放比例（0-10.0），取值为1时页面按实际尺寸显示，无任何缩放

minimum-scale 允许用户缩放到的最小比例

maximum-scale 允许用户缩放到的最大比例

user-scalable 设定用户是否可以缩放（yes/no）

可以写成：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

常见设备类型(media type):

all 所有设备
screen 电脑显示器
print 打印用纸或打印预览视图
handheld 便携设备
tv 电视机类型的设备
speech 语意和音频盒成器
braille 盲人用点字法触觉回馈设备
embossed 盲文打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体类型引用方法：

1、link方式
<link rel="stylesheet" href="css/wide.css" media="screen and (min-width:641px)" />

2、@import方式

3、@media方式

1）在样式文件中引用媒体类型：
@media all and (min-width:600px) and (max-width:800px) {
h1 {
background: red;
}
}

2）写在内部样式中
<head>
<style type="text/css">
@media only screen and (min-width:600px) and (max-width:800px) {
h1 {
background: red;
}
}
/*设备横向放置是*/
@media (orientation: landscape) {
h1 {
background: yellow;
}
}
</style>
</head>