前端复习--来谈谈响应式设计

响应式设计如何实现？

这是一道面试常常问到的题目。今天借着几篇好文章，来好好总结一下，如何回答此类问题。

1  https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

这篇文章谈到，响应式设计并不仅仅是 内容随着窗口的变化，布局发生变化；它还意味着去适应不同设备，屏幕分辨率等等内容。

css3中有个media query的新语法，它会检测浏览器的宽度（等其他属性）发生变化时，应用哪一种css样式；

但是，当我们把该网页在手机端显示时，手机会默认将显示网页的缩小版，如手机屏幕宽320px，PC上全部显示网页的宽度是980px，在手机上并没有应用media query。而是直接缩小显示了。

为了解决，网页在手机端的显示问题，我们需要在网页中添加 viewport标签。

<meta name="viewport" content="initial-scale=1"> 这样不仅解决了上述问题，

同时避免了<meta name="viewport" content="width=device-width, initial-scale=1">中，将手机横放时，手机宽度发生变化，手机浏览器蒙圈。







2 http://www.cnblogs.com/Wayou/p/responsive_design_step_by_step.html

此文章很好地演示了响应式设计。

要点如下：

1）使用<meta name="viewport" content="initial-scale=1" />适应手机等移动端；

2）使用@media only screen and (max-width: 650px){
                aside{
                    display: none;
                }
                .post{
                    width:100%;
                    float: none;
                    padding: 1em;
                }
    }

来调整局部某些元素，当窗口大小发生变化时，应该显示的样式。

3）使用img{width:100%}使照片跟随网页大小变化。

附件：自己跟着例子做的响应式布局（图片自己随便选的，没有上传）