<link rel="stylesheet" href="css/1.css" media="(min- width:600px)">
<link rel="stylesheet" href="css/2.css" media="(max-
width:599px)">
没写一句js，让页面能够根据宽度来更换样式表。这就是CSS3媒体查询！
媒体查询的兼容性：IE9开始兼容的！javascript检测宽
度更换样式表，是IE6也兼容。
媒体查询是CSS3中新特性。还可以用在内嵌式 , 代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="css/1.css" type="text/css" media="(min-width:800px)">

  <link rel="stylesheet" href="css/2.css" type="text/css" media="(max-width:799px) and (min-width:600px)">

  <link rel="stylesheet" href="css/3.css" type="text/css" media="(max-width:599px)">

  <style type="text/css">

  @media(min-width:800px){

       div{

           width:200px;

           height:200px;

           background:red;

       }

  }

  @media(max-width:799px){

       div{

          width:100px;

          height:600px;

          background:blue;

       }

  }

  </style>

 </head>

 <body>

     <div></div>

 </body>

</html>

css代码：

预览效果：

当浏览器最小屏幕宽度为800px时，显示样式表如下图所示：

当浏览器最大屏幕宽度为799px时，显示样式表如下图所示：

媒体查询条件：media="screen and...." (可加可不加)
当用户的上网设备是屏幕的时候，上网设备除了有屏幕设备之外，还有残疾人听觉设备、电子阅读器。
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen and (min-width: 800px)" >

CSS3中媒体查询，更换样式表的更多相关文章

  1. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  2. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  3. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  4. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  5. css3 media媒体查询器用法总结（附js兼容方法）

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  6. 第四章 在MVC4.0中对脚本以及样式表的引用变化

    原文:http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 一.可以直接使用“~”,而无需使用Href对象 ...

  7. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  8. 初识CSS3之媒体查询（2015年05月31日）

    一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...

  9. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

随机推荐

  1. sp_executesql

    execute相信大家都用的用熟了,简写为exec,除了用来执行存储过程,一般都用来执行动态Sql  sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如 ...

  2. css3 flex

    <!DOCTYPE html> <html> <head> <style> .first-face { display: flex; justify-c ...

  3. .NET开发实战1-军队未出，粮草先行。

    马上期末考试了,会想起这个学习的自己.一直都在一个人搞java的研究,C#课也没怎么去上.所以在这里想弥补一下自己没去上课的原因,也希望老师能够理解这个还在迷茫的我. 正所谓,军队未出粮草先行,所以我 ...

  4. AJAX-----01远古时期的ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python对json的操作总结

    Json简介:Json,全名 JavaScript Object Notation,是一种轻量级的数据交换格式.Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式.现在也常用于h ...

  6. 获取dll中根目录

    AppDomain.CurrentDomain.BaseDirectory获取当前应用程序域的基目录 好像是万能的:form:可执行文件路径控制台:输出路径web:根目录

  7. eclipse 设置jsp页面为HTML5

    window-preferences-web-jspFiles-Editor-Templates-jsp with html... 然后修改为<!DOCTYPE html>就行了

  8. 获取gridpanel 中 checkbox的状态

    最近一直在用extjs前天框架来写作项目,很少用到这个框架,过程中遇到很多麻烦, 可能就是一个小的问题会困扰你很长时间, example: 我做一个报表,要获取gridpanel中 checkbox的 ...

  9. html、css 【珍藏】

       行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效.     块级元素: 各占据一 ...

  10. [问题2014A02] 解答二（求和法+拆分法，由张诚纯同学提供）

    [问题2014A02] 解答二(求和法+拆分法,由张诚纯同学提供) 将行列式 \(|A|\) 的第二列,\(\cdots\),第 \(n\) 列全部加到第一列,可得 \[ |A|=\begin{vma ...