Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。

媒体查询有两种玩法,第一种,直接在link中判断设备的尺寸,然后引用不同的css文件

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 500px)">

意思是当屏幕的宽度大于等于500px的时候,应用styleA.css

screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型(自行度娘)

and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

(min-width: 500px) 就是媒体特性(Media features) (自行度娘)

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 500px) and (max-width: 1000px)">

意思是当屏幕的宽度大于500小于1000时,应用styleB.css

第二种,直接写在<style>标签里

@media screen and (max-width:1000px) { /*当屏幕尺寸小于1000px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}

要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

bootstrap中的container类

@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

响应式布局之媒体查询 @media的更多相关文章

  1. html5 响应式布局(媒体查询)

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

  2. (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

    (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:styl ...

  3. 响应式web之媒体查询(一)

    HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...

  4. 项目总结一:响应式之CSS3 媒体查询

    1.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scala ...

  5. pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  6. 响应式布局1--媒体查询和-webkit-min-device-pixel-ratio

    -webkit-min-device-pixel-ratio其实就是这个玩意 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pix ...

  7. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  8. HTML-移动开发技巧 响应式布局 弹性布局

    移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...

  9. 六、使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...

随机推荐

  1. WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效

    不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.设计的是产品的工作原理.我觉得腾讯掌握了其 ...

  2. 爬虫学习之-python插入mysql报错

    异常:'latin-1' codec can't encode characters in position 62-66: ordinal not in range(256) 用Python通过pym ...

  3. VC的常用调试方法

    前言 VS是非常强大的IDE,所以掌握VSVC的常用方法,将会使得我们找出问题解决问题事半功倍. 目录 VSVC的常用调试方法 前言 1. Watch窗口查看伪变量 2. 查看指针指向的一序列值 3. ...

  4. java 基础 --Collection(Map)

    Map是不是集合?哈哈哈 java编程思想>的第11章,第216页,正数第13行,中原文:“……其中基本的类型是LIst.Set.Queue和Map.这些对象类型也称为集合类,但由于Java类库 ...

  5. javascript之容易出错的地方

    1: 不是所有的非空对象都有toString()方法的 var obj = Object.create(null); console.log(obj.toString());   // false; ...

  6. PHP面向对象之final关键字

    最终类 最终类,其实就是一种特殊要求的类:要求该类不允许往下继承下去. 形式: final  class  类名{ //类的成员定义...跟一般类的定义一样! } 最终方法 最终方法,就是一个不允许下 ...

  7. post和updatebatch区别 delphi

    Post是确认当前的修改,而UpdateBatch是把已经确认但是没有存盘的数据写入数据库如果不是使用批量更新的方式的时候,Post的时候,确认的修改直接写入数据库. 我弄了一个例子是ado的.往数据 ...

  8. 【uoj#164】[清华集训2015]V 线段树维护历史最值

    题目描述 给你一个长度为 $n$ 的序列,支持五种操作: $1\ l\ r\ x$ :将 $[l,r]$ 内的数加上 $x$ :$2\ l\ r\ x$ :将 $[l,r]$ 内的数减去 $x$ ,并 ...

  9. Collection接口框架

    1. Collection接口 其主要的UML类图: Collection接口继承自Iterable接口.Iterable接口中定义了Iterable方法,该方法会返回一个迭代器,用于遍历合集中的元素 ...

  10. 深入理解JVM一类加载器原理

    我们知道我们编写的java代码,会经过编译器编译成字节码文件(class文件),再把字节码文件装载到JVM中,映射到各个内存区域中,我们的程序就可以在内存中运行了.那么字节码文件是怎样装载到JVM中的 ...