归元

一套好用的前端工具包Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
中文版交流地址: http://www.bootcss.com/

他有一个不错的方案兼容不同设备
响应式设计 Media Query根据设备和分辨率的不同而使用不同样式

 

响应式设计用来做什么?

http://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标签      

  1. <metaname="viewport"content="width=device-width, initial-scale=1.0">

 

 

使用media query

 

 

Bootstrap不会自动包含media query,但理解和添加media query却是非常容易。如下这般,即可在Bootstrap中包含响应式特性:      

  1. 使用编译后的bootstrap-responsive.css

  2. 添加 @import "responsive.less" ,然后重新编译Bootstrap

  3. 修改并重编译responsive.less为一个单独的文件

为什么不直接包含它呢? 说实话,并不是什么应用都需要响应性设计,响应性不是必须的。 与其让开发者移除这个特性,不如由我们动手。

 

 

  1. // 水平状态的手机及以下

  2. @media(max-width:480px){...}

  3.  

  4. // 界于水平手机与竖直平板之间

  5. @media(max-width:768px){...}

  6.  

  7. // 界于竖直平板与水平平板/桌面之间

  8. @media(min-width:768px)and(max-width:980px){...}

  9.  

  10. // 宽桌面

  11. @media(min-width:1200px){..}

 

 

 

用于响应性的实用类

 

 

介绍

为了更高效友好地面向手机开发,可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。      

何时适用

你的网站已经有了一点底子,但并不想再为不同设备而重新创建一个完全不同的站点,这种情况就适合使用实用类来完善呈现效果。      

例如,你仅仅想在使用手机浏览时显示 <select> 做为导航,而在使用平板和桌面浏览时,就隐藏起来。      

 

 

支持的类

下面展示了可用的类,及其在media query(由设备标识)下的效果。这些类保存在 responsive.less 。      

类手机 <=480px平板 <=767px桌面 >=768px.visible-phone显示隐藏隐藏.visible-tablet隐藏显示隐藏.visible-desktop隐藏隐藏显示.hidden-phone隐藏显示显示.hidden-tablet显示隐藏显示.hidden-desktop显示显示隐藏

测试案例

改变你的浏览器尺寸,或是不在同的设备上浏览,以观察上述类的效果。      

显示...
  • 手机

  • 平板

  • 桌面✔ 桌面

隐藏...
  • 手机✔ 手机

  • 平板✔ 平板

  • 桌面

 

http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html

 

 

评论

© 归元 | Powered by LOFTER