在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的( Bootstrap 是移动设备优先) */ /* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 栅格系统-媒体查询的更多相关文章

  1. Bootstrap栅格系统&媒体查询

    bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.   栅格系统 媒体查询 媒体查询是非常别致的"有条件的 CSS ...

  2. Bootstrap3 栅格系统-Less mixin 和变量

    除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单.语义化的布局. 变量 通过变量来定义列数.槽(gutter)宽.媒体查询阈值(用于确定 ...

  3. BootStrap3栅格系统与布局

    栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...

  4. Bootstrap3 栅格系统-嵌套列

    为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个 ...

  5. Bootstrap3 栅格系统-实例:从堆叠到水平排列

    使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列.所有"列( ...

  6. Bootstrap3 栅格系统-栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...

  7. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  8. Bootstrap3 栅格系统-列排序

    通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <div class="row"> <d ...

  9. Bootstrap3 栅格系统-列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md- ...

随机推荐

  1. lsdyna进阶教程-弹性球撞击刚性平板

    在lsdyna基础教程中,我们做了一个关于刚性球撞击弹性平板的粒子,现在我们考虑另外一个问题,如果用弹性球撞击刚性地面该怎么做呢?是不是要从头开始建模,操作步骤是不是一样呢?其实很简单,将球和地面的材 ...

  2. CodeForces 912d fishes(优先队列+期望)

    While Grisha was celebrating New Year with Ded Moroz, Misha gifted Sasha a small rectangular pond of ...

  3. leetcode 283. Move Zeroes -easy

    题目链接:https://leetcode.com/problems/move-zeroes/ 题目内容: Given an array nums, write a function to move ...

  4. 前端性能监控系统 & 前端数据分析系统

    前端监控系统 目前已经上线,欢迎使用! 背景:应工作要求,需要整理出前端项目的报错信息,尝试过很多统计工具,如: 腾讯bugly.听云.OneApm.还有一个忘记名字的工具. 因为各种原因,如: 统计 ...

  5. 树莓派控制高电平蜂鸣器(c语言+新手向)

    话不多说,先上代码: #include <wiringPi.h> #include <stdio.h> #include <sys/time.h> #define ...

  6. 【luogu3384】【模板】树链剖分

    省选被暴虐,成功爆0...顺便ditoly差点全省总分Rank1 orz..... 于是开始赶进度学新算法.... 然后决定开始学习树剖orz... 发现树剖很好用啊!!!! 然后做了模板题. 题目就 ...

  7. bzoj 1085: [SCOI2005]骑士精神

    Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士,且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2,纵 ...

  8. [Noi2015]小园丁和老司机

    来自FallDream的博客,未经允许,请勿转载,谢谢. 小园丁 Mr. S 负责看管一片田野,田野可以看作一个二维平面.田野上有n棵许愿树,编号1,2,3,…,n,每棵树可以看作平面上的一个点,其中 ...

  9. bzoj3198[Sdoi2013]spring 容斥+hash

    3198: [Sdoi2013]spring Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 1143  Solved: 366[Submit][Sta ...

  10. UDA机器学习基础—评估指标

    这里举例说明 混淆矩阵  精确率 召回率  F1