html响应式与自适应

自适应:

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,即"一次设计,普遍适用"。

问题：如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上看，内容过于拥挤。

响应式：

解决了自适应所暴露出的问题，可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所改动。

 实现：

                  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%;}