Responsive设计 (响应式设计)

1、什么是响应式设计css

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

响应式布局设计要考虑到元素布局的秩序,须要知足三个条件:网站

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

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

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

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

img {max-width:100%;}
  • 不一样的显示风格,须要在Media Querues上写不一样的样式

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

相关文章
相关标签/搜索