移动端布局

1、html标签中的meta标签是为了在pc端开发的代码，能适配移动端

2、横向滚动
如果横向元素很多，盒子装不下，通过弹性盒的话，元素会被挤压，通过给元素设置flex-shrink为0，表示不挤压，默认是0表示挤压，这样子的话，元素就会超出盒子，再通过给盒子设置overflow为auto表示滚动展示

3、多列布局
在一个盒子中内容分列布局，所以针对盒子中的内容；
设置列数属性column-count、设置列间距column-gap、设置列边框column-rule（可以设置三个值：厚度、样式、颜色）、列高度统一column-fill（auto表示与父盒子高度一样）、设置列宽度column-width；
设置盒子中的小盒子跨列布局（就是单独作为一行）column-span（all表示跨列，none是默认值，表示不跨列）

4、响应式布局
针对不同客户端的尺寸区别，在满足特定尺寸时动态的显示布局；客户端有很多，譬如显示器、电视机、打印机，我们一般只针对笔记本、移动端screen
在style标签中写入如下代码样式:

<style>
	@media screen and (min-width:100px){
		<div>
			... ...
		<div>
	}
</style>

其中@media是固定的，后面跟客户端设备名称，and后面是相应时的断点条件
这个响应式布局容易产生无用节点，比较适合简单的网页，如果需要在复杂的网页，最好用em、rem

5、em、rem布局
尺寸单位px是绝对单位；em是相对父元素字体大小的单位，比如父元素的尺寸时10px，1em就是10px；rem是相对于根元素（html）的单位

6、vh、vw布局
vh、vw是相对视口的高度、宽度，可以根据设备动态的等比例缩放布局，从而不需要js介入
100vh、100vw是视口整个的高度和宽度
在没有滚动条的情况下，100vh、100vw等价于100%，如果有滚动条的话，100vh、100vw是包含滚动条，100%是除滚动条外的空间