文档章节

初次接触媒体查询---bootstrap 栅格 (待补充)

h
 horacerain
发布于 2016/11/01 16:26
字数 567
阅读 29
收藏 0

前文摘自 http://www.cnblogs.com/hy-sunny/p/5563766.html
表示感谢。

1、什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

2、为什么响应式设计需要,媒体查询 如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式

3、如何在CSS文件中引入媒体查询

媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

4、怎样使用media

一、

首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

ps:

width=device-width:宽度等于当前设备的宽度

initial-scale=1:初始的缩放比例(默认为1)

maximum-scale=1:允许用户缩放到得最大比例(默认为1)

user-scalable=no:用户不能手动缩放

二、怎样在CSS文件中写CSS响应式媒体查询

例:

@media screen and (max-width:720px) and (min-width:320px){

  body{

   background-color:red;

   }

@media screen and (max-width:320px){

  body{

     background-color:blue;

   }

}

ps:该段媒体查询的意思是:当设备屏幕宽度在320px——720px之间时,媒体查询中body的背景色(background-color:red;)会重叠之前的body背景色,当设备屏幕宽度在320px以下时,媒体查询中body的body背景色(background-color:blue;)会重叠之前的body背景色


栅格 中, .col-md-* ,在手机和平板上是堆叠在一起的 (width<992px;) ,在桌面上是水平排列的。 .col-xs-* ,永远是水平排列的 .col-sm-* ,在小屏幕上是堆叠的(width<768px) .col-lg-* ,在大屏幕上是水平的(width>=1200),

以上4个类,若存在多个, 在屏幕宽度变化时,对应的类起作用!

本文转载自:http://www.cnblogs.com/hy-sunny/p/5563766.html

h
粉丝 0
博文 18
码字总数 2064
作品 0
海淀
私信 提问
媒体查询以及判断屏幕宽高响应式相管处理

最近做了一个响应式项目,经历了几番周折已经接近尾声。今天先总结一下项目中的3个问题。(响应式,媒体查询,判断屏幕) 1.响应式,首先引入bootstrap相关样式,众所周知下面的问题就是给h...

Yanaly
2018/08/29
33
0
转:Bootstrap3.0教程

第一部分:Bootstrap介绍 1.Bootstrap学习从现在开始 http://www.cnblogs.com/aehyok/p/3381651.html 2.Bootstrap3.0学习第一轮(入门) http://www.cnblogs.com/aehyok/p/3398359.html 第二部......

子弹兄
2014/08/22
380
2
CSS响应式设计之栅格系统

说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计。这是一种设计风格,而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整,可...

独孤蝈蝈
2016/10/24
95
0
Bootstrap(二)栅格系统

响应式设计 页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸、屏幕定向等)进行相应的响应和调整,具体的实践方式由多方面决定,包括弹性网络布局、图片使用等。 无论有户...

ZeroBit
07/16
13
0
实现一个最小的 CSS 响应式布局系统

阳光里她在院子中央晾晒着衣裳 / 在四季的风中她散着头发安慰着时光 ——赵雷《南方姑娘》 响应式布局系统,在现在流行的 CSS 框架中已经非常常见了。它主要由容器类和约定一行列数的栅格系统...

zhangbao90s
05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

YUM仓库配置及命令详解

导读 通过源代码编译的方式安装程序在灵活性、可定制性方面具有无可比拟的优势,但也正因为这种特性给管理员带来了额外的维护开销,当应用在大规模的服务器群集时存在一定的局限性。那么就需...

问题终结者
34分钟前
7
0
docker初学者

docker简介 在真正使用这项技术之前很难深刻的理解它的概念。 从简单的方面来说,docker就是一个轻量级的虚拟机。接下去的学习首先不妨抱着这个想法来看,让后慢慢寻找差别,最终我们会回来试...

街角的小丑
55分钟前
13
0
了解下Hz单位的意思

今天看到计组的突然看到Hz这个单位,突然不知道它是啥意思,就百度了解啦下。 赫,是频率的基本单位,为纪念验证电磁波存在的德国物理学家海因里希·鲁道夫·赫兹(Heinrich Rudolf Hertz)而...

南桥北木
今天
9
0
Mysql的sql_mode模式

sql_mode 是一个很容易被忽视的配置,宽松模式下可能会被输入一些非准确数据,所以生产环境下会要求为严格模式,为了保持生产环境和开发环境,测试环境一致性,我们开发环境和测试环境也要配...

贾峰uk
今天
11
0
Qt程序打包发布方法(使用官方提供的windeployqt工具)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/toTheUnknown/article/details/81748179 如果使用到了Qt ...

shzwork
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部