虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：

请你说一说你知道的所有web布局方式？

1.浮动　

　　float:left|right

2. inline-block   

　　display:inline-block(行内块级)

3.flexible box(弹性盒子)

　　display:flex

4.grid

　　display:grid

5.绝对、相对布局

　　position:absolute/relative

6.表格

　　display:table

7.使用布局框架--bootstrap.css

本文的所有例子使用了同一种三栏布局。

大尺寸：width>1024px

中尺寸：768px<width<1024px

小尺寸：width<768px

1.浮动布局，最常见的布局之一

普通的html布局，一个header，一个footer,中间是三栏布局，关键的css代码，三栏布局添加浮动，清除浮动，元素的宽度都是百分比，日常应用是多用auto，让里面的内容撑起高度

用@media查询，当@media的查询条件满足时，应用{}中的样式，screen就是指电脑屏幕。

2.inline-block   display:inline-block

html和浮动布局都是一样的，为了避免空白符号压缩的问题，写法略有变化。

只是把float:left改为了这两句，其他的不变，没有推荐，看个人习惯。

3.flexible box (弹性盒子)

display:flex;设置在容器上。

先介绍下display:flex的用法：

本例中只改变就行

4. display:grid 网格布局，不常用。

5.position:absolute/relative 常用。

6.使用bootstrap.css框架。

tips:

1.尽量不使用固定高度、宽度，使用百分比，auto，calc()

2.viewport:

版权申明：本站文章均来自网络，如有侵权，请联系01056159998 邮箱：itboby@foxmail.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有