有时候需要对bootstap的样式自定义,比如说某个元素的“height”值,要放在与bootstrap媒体查询同步的样式里,才会兼容响应式布局。

.container类是bootstrap的官方参考样式,照着官方设置的样式去自定义样式,就对了,一个样式要写三份。
@media screen and (min-width: 992px){
.container {
max-width: 960px;
}
   .自定义类{height: 800px}
} @media screen and (min-width: 768px) and (max-width: 991px){
.container {
max-width: 720px;
}
.自定义类{height: 600px}
@media screen and (min-width: 576px) and (max-width: 767px){
.container {
max-width: 540px;
}
.自定义类{height: 200px}

@media screen and (min-width: 992px){
/*PC端*/
} @media screen and (min-width: 768px) and (max-width: 991px){
/*iPad端*/
} @media screen and (min-width: 300px) and (max-width: 767px){
/*手机端*/
}

bootstrap 的媒体查询的更多相关文章

  1. Bootstrap 3 媒体查询

    可以参考 Bootstrap  的媒体查询,写网站. html: <div class="bootstrap-3-media"> <p>Mobile-Fir ...

  2. bootstrap媒体查询

    Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 ...

  3. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  4. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  5. 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询

    前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  7. bootstrap在ie8下,兼容媒体查询

    最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...

  8. bootstrap 媒体查询

    //各类设备的分辨率 /*超小设备(手机,小于768px)*/ /* Bootstrap 中默认情况下没有媒体查询 */ /*超小型设备(小于768px)*/ @media (min-width:@s ...

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

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

随机推荐

  1. (转)Eclipse配置GitHub代码库(以Windows7为例)

    原文地址:http://blog.csdn.net/twlkyao/article/details/26340685 1.安装Git 首先安装git.这里只讲Windows环境下安装Git方法. 从G ...

  2. html中空格字符实体整理

    摘要 浏览器总是会截短 HTML 页面中的空格.如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个.如需在页面中增加空格的数量,您需要使用 字符实体. 本篇就单介绍空格的字 ...

  3. c输出格式

    #include <stdio.h> #include <stdlib.h> #include <math.h> int main() { //取整 printf( ...

  4. Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...

  5. Curl中的参数知多少

    我们常用的curl命令,后面有好多参数,都是什么含义呢?遂记录此文以备用. Curl命令参数解释: -a/--append 上传文件时,附加到目标文件 -A/--user-agent <stri ...

  6. 将web应用部署到Tomcat的三种方式

    Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...

  7. JavaSE学习总结(七)—— 集合

    一.为什么需要集合 如果要将100个学生成绩存放到程序中,怎么做? 首先想到是数组 int[] scores=new int[100]; 然而,长度是固定的,比如是101个学生成绩,这个数组就不能用了 ...

  8. jq实现对checkbox的常用操作

    场景1:点击checkbox 其他checkbox被选中的都取消  (意思是只能选中一个checkbox) function fn(obj,event){ //obj就是这个this这个对象 ,eve ...

  9. 调用write()写

    一.在POSIX中的定义 #include <unistd.h> ssize_t write(int fd, const void *buf, size_t count); 二.返回值 ( ...

  10. QWidget窗口类

    import sys from PyQt5.QtWidgets import QWidget, QApplication,QPushButton from PyQt5.QtGui import QIc ...