前端知识点整理系列（一）—— 响应式布局

今天整理关于响应式布局的知识。响应式布局这个名词现在应该已经很熟悉了，随着移动端的普及，我们的网站的用户体验需要提升，响应式布局可以解决我们的问题。

---

什么是响应式布局？

简单点说，就是同一个页面可以适应不同的屏幕大小设备的设计方案，做一个网站同时能兼容多个终端，通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

布局及设置meta标签

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

通过媒体查询来设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写，这个时候的布局会覆盖掉之前设置的布局。

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
}

设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){

}
/**iphone**/
@media only screen and (width:320px)and (width:768px){

}

响应式的图片

• 大图随容器缩放，保持宽高比
• max-width: 100%;

     #wrap img{
        max-width:100%;
        height:auto;
    }

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。