<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. Netty writeAndFlush() 流程与异步

    Netty writeAndFlush()方法分为两步, 先 write 再 flush @Override public ChannelFuture writeAndFlush(Object msg ...

  2. Java Servlet(五)：GenericServlet与Servlet、HttpServlet之间的关系(jdk7+tomcat7+eclipse)

    本篇主要记录下,对GenericServlet的作用理解,及其与Servlet/HttpServlet之间的关系. 示例完成业务: 1.新建一个login.jsp页面,要求改页面能输入username ...

  3. 9.请写出PHP5权限控制修饰符

    1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...

  4. 0506 Scrum 项目1.0

    团队名称:√3 团队目标:全力完成这次的项目 团队口号:我要改变世界,改变自己!!! 演讲稿:我们的产品 鸡汤精选 是为了解决 当下社会出现的太多的负能量使得人们的内心十分 的痛苦, 他们需要强大的正 ...

  5. 内存缓存机制and垃圾回收机制

    一.内存缓存机制 var_dump(memory_get_usage(true)); $a="laruence"; var_dump(memory_get_usage(true)) ...

  6. html5，input，表单

    <form action="3.html">email:<input type="email" name="email" ...

  7. easyui datagrid将表头的checkbox不显示（隐藏）

    <script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:&quo ...

  8. python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  9. win8win10以管理员身份运行cmd方法

    win8win10以管理员身份运行cmd方法 Win7/8下提示OpenSCManager failed 拒绝访问Maven nexus 安装nexus : wrapper | OpenSCManag ...

  10. jQuery 选择器 （基础恶补)

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...