响应式设计
什么是响应式设计？
让一个网站可兼容不同分辨率的设备，给用户更好的视觉使用体验
响应式设计的优缺点？
优点：解决了设备可见的差异化展示
缺点：兼容性代码多，工作量大，加载速度受影响。
启动响应式：
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
注意：Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。
响应式设计的原则：
移动优先，在设计初期就要考虑到页面如何在多终端展示；
渐进增强，充分发挥硬件设备的最大功能。
各种媒介的分类：
xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px
sm：small 窄屏幕，默认指浏览器像素宽度大于等于768px
md：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px
lg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px
结合屏幕宽度时，栅格系统显示：
xs:col-xs-1~ col-xs-12，多列始终在一行内。
sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。
md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。
lg：col-lg-1~ col-lg-12，多列在浏览器像素宽度大于等于1200px时才在一行内。
注：在处理不同像素宽度的时候，大宽度的适配优先于窄宽度（lg>md>sm>xs）。
扫一扫
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
