Responsive设计 （响应式设计）

一、什么是响应式设计

维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”

响应式布局设计要考虑到元素布局的秩序，需要满足三个条件：

• 网站必须建立在灵活的流体网格基础上

流体网格，这种网格设计将每个格子使用百分比单位来控制网格大小，这样做让网格大小随时根据屏幕尺寸大小做出相对应的比例缩放

• 引用到网站的图片必须是可伸缩的

弹性图片指的是 不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。

img {max-width:100%;}

• 不同的显示风格，需要在Media Querues上写不同的样式

根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

 

转载于:https://www.cnblogs.com/afighter/p/5734469.html