自适应:
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,即"一次设计,普遍适用"。
问题:如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上看,内容过于拥挤。
响应式:
解决了自适应所暴露出的问题,可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所改动。
实现:
1.允许网页宽度自动调整:<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
2.尽量少使用绝对宽度,使用百分比或rem代替;
3.相对大小的字体(em/rem);
4.css3 @media查询
css语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="
mediatype and|not|only (
media feature)" href="
mystylesheet.css">
5.图片的自适应:img{max-width:100%;}