web前端自适应布局的几种方法

一、自适应布局方法分类

　　（1）一般来说有以下几种web前端自适应布局方法：

1、浮动 float:left|right——最常用的布局方式之一

设置了float的元素脱离了文档流。

需要注意在使用过浮动后，需要清除浮动，从而避免影响后面的非浮动元素。

2、inline-block display:inline-block

3、flexible box display:flex

4、grid display:grid

5、绝对、相对定位 position:absolute|relative

6、表格 <table>或display:table——表格布局比较适用于表格

7、使用框架布局 bootstrap、Pure.css等——框架布局也是使用了以上几种布局的原理

（2）对于手机端的只适应布局方法

viewport主要用于手机自适应布局，

因为现在手机分辨率越来越高，web上的1px到手机上未必就是1px，用这个meta让手机的px和web的px保持一致。

<meta name="viewport" content="width=500, initial-scale=1">

　　（3）IE盒模型

　　　　给所有的元素都加上一下属性

IE盒模型的宽度和高度包括了padding和border，这样对于百分比的布局比较好控制，不会出现加起来超过100%而换行的情况。

* {
  box-sizing: border-box;
}

二、页面尺寸理解

这里指的尺寸是对于页面显示频而言的，

固定值的范围来判断页面显示频是什么单位的尺寸

当@media的查询条件满足时，应用{}中的样式。

screen就是指电脑屏幕，还有print指打印页面。

@media做的事完全可以用javascript代替，用js添加一个class或者直接用js修改css属性。

优点是浏览器全兼容，缺点就是用了js。

@media only screen and (max-width: 1024px) {
  .menu-left {
    width: 30%;
  }
}

@media only screen and (max-width: 768px) {

}

三、自适应布局中应该注意的点

（1）尽量不使用固定高度、宽度

　　　　在自适应的布局中少用或者不用固定的高度、宽度，

　　　　使用百分比, auto或calc()。

（2）元素的宽度都是百分比。因为没有内容高度给死了，日常应用时多用auto，让里面的内容撑开高度。

秒客网