响应式设计

时间 2019-11-12

标签响应设计繁體版

原文原文链接

启用响应式特性

经过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表便可启用响应式CSS。若是你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。css

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意！ Bootstrap在默认状况下是没有引入响应式特性的，由于不是任何状况都须要使用到。咱们并非鼓励开发者移除此功能, 而是在须要使用的时候才启用它。ios

关于响应式Bootstrap

Media queries容许在一些条件基础上自定义CSS 例如：—ratios、widths、display type, etc— 但一般都是围绕着 min-width 和 max-width 这二者。bootstrap

修改栅格系统中列的宽度
须要的时候, 用堆叠元素代替浮动
调整标题和文本的大小以便适合各类设备

谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。less

被支持的设备

Bootstrap 所支持的几个media queries都放在了一个文件中，能够让你的项目更灵活的去适应不一样设备和屏幕分辨率。包括：布局

类型	布局宽度	列宽	间隙宽度
大屏幕	大于等于1200px	70px	30px
默认	大于等于980px	60px	20px
平板	大于等于768px	42px	20px
手机到平板	小于等于767px	流式列，无固定宽度
手机	小于等于480px	流式列，无固定宽度

/* 大屏幕 */
@media (min-width: 1200px) { ... }
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

响应式布局辅助class

为了更快的针对移动设备作开发, 下面列出的辅助class用于针对不一样设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class能够在 responsive.less 文件中找到。spa

Class	手机767px 及如下	平板979px 到 768px	电脑默认
`.visible-phone`	显示	隐藏	隐藏
`.visible-tablet`	隐藏	显示	隐藏
`.visible-desktop`	隐藏	隐藏	显示
`.hidden-phone`	隐藏	显示	显示
`.hidden-tablet`	显示	隐藏	显示
`.hidden-desktop`	显示	显示	隐藏