responsive响应式布局

Responsive设计最关注的就是宽度：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

 

布局技巧（都是为了保持你的HTML简单干净，在的关键部分（元素）不要过分的依赖现代技巧来实现，比如说css3特效或者js脚本）：

 

丢去了一些对Responsive有影响的细节：
尽量少用无关紧要的div
不使用内联元素(inline)
尽量少用js或flash
丢去没用的绝对定位和浮动样式
屏弃任何冗余结构和不使用100%设置

 

能帮助Responsive确定更好的布局的内容：
使用HTML5 Doctype和相关指南
重置好你的样式（reset.css）
一个简单的有语义的核心布局
给重要的网页元素使用简单的技巧，比如导航菜单之类元素

测试html结构是否简单干净的方法：
禁掉所有样式，看页面是否内容排列有序，方便阅读。

定义断点，即设备宽度的临界点。也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？常见的断点有六种：

<480 <768 <320 <768-1024 >1024
第一个断点群体就是针对于智能手机设置，他的宽度是小于480px
第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px
第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)
更细分一些：
添加一个小于320px的断点，针对于小型的移动设备；
还可以添加适用于平板设备的断点，大于768px小于1024px
最后还可以为超宽的桌面设置一个断点，大于1024px(>1024px

 

参考资料：http://www.w3cplus.com/css3/responsive-design-in-3-steps