bootstrap 的媒体查询
有时候需要对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 的媒体查询的更多相关文章
- Bootstrap 3 媒体查询
可以参考 Bootstrap 的媒体查询,写网站. html: <div class="bootstrap-3-media"> <p>Mobile-Fir ...
- bootstrap媒体查询
Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 ...
- 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity
一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...
- python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架
一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询
媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...
- bootstrap在ie8下,兼容媒体查询
最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...
- bootstrap 媒体查询
//各类设备的分辨率 /*超小设备(手机,小于768px)*/ /* Bootstrap 中默认情况下没有媒体查询 */ /*超小型设备(小于768px)*/ @media (min-width:@s ...
- Bootstrap栅格系统&媒体查询
bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box. 栅格系统 媒体查询 媒体查询是非常别致的"有条件的 CSS ...
随机推荐
- (转)Eclipse配置GitHub代码库(以Windows7为例)
原文地址:http://blog.csdn.net/twlkyao/article/details/26340685 1.安装Git 首先安装git.这里只讲Windows环境下安装Git方法. 从G ...
- html中空格字符实体整理
摘要 浏览器总是会截短 HTML 页面中的空格.如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个.如需在页面中增加空格的数量,您需要使用 字符实体. 本篇就单介绍空格的字 ...
- c输出格式
#include <stdio.h> #include <stdlib.h> #include <math.h> int main() { //取整 printf( ...
- Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
- Curl中的参数知多少
我们常用的curl命令,后面有好多参数,都是什么含义呢?遂记录此文以备用. Curl命令参数解释: -a/--append 上传文件时,附加到目标文件 -A/--user-agent <stri ...
- 将web应用部署到Tomcat的三种方式
Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...
- JavaSE学习总结(七)—— 集合
一.为什么需要集合 如果要将100个学生成绩存放到程序中,怎么做? 首先想到是数组 int[] scores=new int[100]; 然而,长度是固定的,比如是101个学生成绩,这个数组就不能用了 ...
- jq实现对checkbox的常用操作
场景1:点击checkbox 其他checkbox被选中的都取消 (意思是只能选中一个checkbox) function fn(obj,event){ //obj就是这个this这个对象 ,eve ...
- 调用write()写
一.在POSIX中的定义 #include <unistd.h> ssize_t write(int fd, const void *buf, size_t count); 二.返回值 ( ...
- QWidget窗口类
import sys from PyQt5.QtWidgets import QWidget, QApplication,QPushButton from PyQt5.QtGui import QIc ...