移动互联网的兴起，前端人员面临的早已不仅仅是pc端的几个主流尺寸的适应，还有碎片化极其严重的手机端，pad端。有些网站采取的方式是根据设备的不同提供不同的网页，以满足在各个设备的完美展示。但是这种方式也有很大的弊端，那就是增加了开发工作量和维护的工作量。如果是大型的网站，这种方式会大大增加成本。那么，前端工程师是否可以开发一套网页来适应各种尺寸设备呢？答案是肯定的，自适应网页设计就是我们目前来说比较优良的解决方案。
1.什么叫自适应？
自适应网页设计是指：自动识别屏幕宽度或高度，并作出相应调整的网页设计。
如何自适应
1.自适应网页设计是基于浏览器允许网页自动调整宽度。现在主流的浏览器都支持这一功能，包括一直让前端工程师头疼的IE系列，从IE9开始支持。IE8，IE7等老浏览器可以使用code.google.com/archive/p/css3-mediaqueries-js来支持。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
viewport是视图。上面代码的意思是让网页的视图宽度等于设备宽度，缩放比例为1（默认不缩放）
2.采用相对单位百分比或者rem替代绝对单位px。主要是以下几方面：
a.宽度。比如说html,body等宽度设定为100%
b.高度。
c.字体使用rem
body{ width:100%; height:100%; font-size:625%;}
h1{ font-size:.14rem}
rem是相对单位，它和em相对父元素不同，是相对于根元素html。所以我们只需要设置html的字体大小。eg.
html{ font-size:625%; //(100px/16px)*100%=625%(这里设置了根元素的字体为100px)}
h1{ font-size:.14rem //.14rem*100 = 14px}
浏览器的根元素默认字体大小为16px。在上例中我们指定了html字体大小为100px，即可以认为1rem = 100px。所以，设定14px为0.14rem.
3.媒体查询 (@media)
1.针对不同尺寸设置样式
@media screen and (max-width:475px) {
body{background-color:black;//当屏幕宽度小于475px的时候，body的颜色变成黑色
}}
2.可以不同的媒体类型定义不同的样式
<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="my.css">
媒体查询可以不同的媒体类型定义不同的样式，也可以根据不同的屏幕尺寸定制样式。将媒体查询和第二点所说的rem单位配合起来，可以实现大部分的页面自适应。
媒体查询则可以根据屏幕尺寸的不同设置html的font-size；rem是相对于根元素html的相对单位。可以通过给html设置不同的font-size来规定1rem等于多少px。简而言之，最后我们可以通过媒体查询设置html的font-size来设置不同尺寸下1rem和1px的不同比例。eg：
html{
font-size:625%;//(100px/16px)*100%=625%(这里设置了根元素的字体为100px)
}
@media screen and (max-width:475px) {
html{background-color:500%;
;}
.container{height:2rem;}
上例中，在屏幕宽度大于475px的设备中，.container的实际高度为200px；而在屏幕宽度小于475px的设备中，.container的实际高度为160px。这样，我们就通过了使用相对单位rem和媒体查询实现了元素高度的自适应。
实用小建议
1.如何选择是根据屏幕宽度自适应还是高度自适应？
大多数情况下都是根据宽度来定的。因为用户一般更能接受纵向滚动条，而横向滚动条是要尽量避免的。
根据需求的不同有时候也需要选择根据高度自适应。例如：需要不论是什么屏幕都是一屏展示完，而不需要纵向滚动条。
2.按需用上max-width，min-width，max-height，min-height。给元素设定宽度或者高度的边界值，以防止在过小的屏幕或者过大屏幕上的失常表现。
网友评论