什么是自适应？

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

自适应和响应式的区别

响应式布局

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

自适应

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

自适应的使用

1添加meta标签

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 布局可以自动进行行排列

自适应网页设计（Responsive Web Design）