Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
中文版交流地址： https://www.bootcss.com/
他有一个不错的方案兼容不同设备
响应式设计 Media Query根据设备和分辨率的不同而使用不同样式
响应式设计用来做什么？
https://wrongwaycn.github.io/bootstrap/docs/scaffolding.html
Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等。但最常用的条件还是 min-width 和 max-width 。
在栅格中修改列的宽度
堆叠元素，而不是让其浮动
根据不同设备重置标题和文字的大小，以获得更好的阅读体验。
谨慎地使用media query，建议仅仅将其做为你的手机用户的初体验。对于大型项目而言，最好还是选择专业的代码库，而不是进行层层的media查询。
支持的设备
Bootstrap在responsive.less文件中提供了一组media query，令你的项目可以更为便捷地适应多种设备和分辨率。包括：
设备布局宽度列宽度间隔宽度智能手机<=480px流式列，非固定宽度智能手机到垂直平板<=767px流式列，非固定宽度水平平板>=768px42px20px默认>=980px60px20px大分辨率>=1200px70px30px
要求有meta标签要确保设备能正常显示响应式页面，就要添加meat标签
<metaname="viewport"content="width=device-width, initial-scale=1.0">
使用media query
Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。如下这般，即可在Bootstrap中包含响应式特性:
使用编译后的bootstrap-responsive.css
添加 @import "responsive.less" ，然后重新编译Bootstrap
修改并重编译responsive.less为一个单独的文件
为什么不直接包含它呢? 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。 与其让开发者移除这个特性，不如由我们动手。
// 水平状态的手机及以下
@media(max-width:480px){...}
// 界于水平手机与竖直平板之间
@media(max-width:768px){...}
// 界于竖直平板与水平平板/桌面之间
@media(min-width:768px)and(max-width:980px){...}
// 宽桌面
@media(min-width:1200px){..}
用于响应性的实用类
介绍
为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。
何时适用你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。
例如，你仅仅想在使用手机浏览时显示 <select> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。
支持的类
下面展示了可用的类，及其在media query（由设备标识）下的效果。这些类保存在 responsive.less 。
类手机 <=480px平板 <=767px桌面 >=768px.visible-phone显示隐藏隐藏.visible-tablet隐藏显示隐藏.visible-desktop隐藏隐藏显示.hidden-phone隐藏显示显示.hidden-tablet显示隐藏显示.hidden-desktop显示显示隐藏
测试案例改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。
显示...手机
平板
桌面✔ 桌面
手机✔ 手机
平板✔ 平板
桌面
https://wrongwaycn.github.io/bootstrap/docs/scaffolding.html
评论