响应式布局

什么是响应式布局？

是什么：服务器端根据不同的浏览器客户端在浏览器中呈现不同的页面。

原理：通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度是多少像素，然后就执行与之对应的CSS样式。

响应式布局原则？

1、移动优先；2、渐进增强；

响应式布局方式？

1、CSS3-Media Query（最简单的方式）

2、借助原生JavaScript（成本高，不推荐使用）

3、第三方开源框架（bootstrap）

怎样布局？

1、先写非响应式布局，页面固定宽度大小。

2、再去添加媒体查询（Media Query)和响应式代码。

3、禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。

<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的设置是为了保证图片原始的高宽比例，以至于图片不会失真。