什么是自适应？

前端工程师的必备技能如何在不同大小设备上呈现同样的网页。

自适应和响应式的区别

响应式布局

就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。在这里大家可以理解为做一个网站就能适应多种设备，而不用在为每个设备做一个特定的版本，在不同的设备上展现的模式也不一样。响应式可以为不同终端的用户提供更舒适的界面和更好的浏览体验 应用方法@media screen和 meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />

自适应

可以自动识别屏幕宽度、并做出相应调整的网页设计。
可以理解为不同大小的设备上呈现同样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动调整布局

自适应的使用

1添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
兼容ie7,8,9 插件

2不使用绝对宽度

即不使用 px用 百分比%替代或者 auto 代替
这里提一下 auto 和 100%区别
举例来说* {
padding: 0;
margin: 0;
}

.container {
width: 100%;
height: 1000px;
}

.content1{
background: yellowgreen;
width: auto;
height: 100px;
padding-left: 100px;
}

.content2 {
background: gold;
width: 100%;
height: 100px;
padding-left: 100px;
}

• {
  padding: 0;
  margin: 0;
  }

.container {
width: 100%;
height: 1000px;
}

.content1{
background: yellowgreen;
width: auto;
height: 100px;
padding-left: 100px;
}

.content2 {
background: gold;
width: 100%;
height: 100px;
padding-left: 100px;
}

图片.png

如图所示
width100% 再加padding会导致 导航条出现
而 auto 再加 会自动把 宽度整体调成100%

3 使用相对字体大小

rem或者em
根据页面大小调节字体页面

4 图片大小

也是使用 百分比和 auto

5 float 布局

使用float 布局可以自动进行行排列