<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. C#实现鸽巢排序

    /// <summary> /// 鸽巢排序 /// 创建一个长度大于等于待排序数组array元素中最大值的标记数组mark, /// 将数组array中元素值个数映射到mark数组中. ...

  2. Java关于md5加密

    package com.mi.util; /** * md5+salt 长度为32的加密 * @author admin * */ public class MD5 { public static v ...

  3. boost源码剖析----boost::any

    boost源码剖析----boost::any 有的时候我们需要有一个万能类型来进行一些操作,这时候boost::any就派上用场了. boost::Any testInt(10); int val ...

  4. RCNN--对象检测的又一伟大跨越

    最近在实验室和师兄师姐在做有关RCNN的研究,发现这里面坑很深呀,在网上找了一个大牛的博客,准备下来继追OPENCV同时,再来追一个RCNN的学习笔记的博文,博文地址如下:http://blog.cs ...

  5. html5，进度条

    <form action="" id="myform">        <progress value="20" max= ...

  6. [CrunchBang]修改win+ubuntu 双 系统菜单的 启动顺序 引导

    说到启动就不得不说GRUB,Linux下大名鼎鼎的启动管理工具(曾经的LILO已经风光不再),当然现在已经是GRUB2了,GRUB2和GRUB最重要的区别就是,GRUB存放系统启动信息的文件为/boo ...

  7. How to locate a path? - Unix & Linux Stack Exchange

    How to locate a path? - Unix & Linux Stack Exchange http://unix.stackexchange.com/questions/2955 ...

  8. PostgreSQL Hot Standby的主备切换

    一. 简介:          PG在9.*版本后热备提供了新的一个功能,那就是Stream Replication的读写分离,是PG高可用性的一个典型应用.其中备库是只读库:若主库出现故障:备库这个 ...

  9. nginx 设置 fastcgi缓存

    #增加调试信息 add_header X-Cache-CFC "$upstream_cache_status - $upstream_response_time"; fastcgi ...

  10. js 获得日期相差天数

    function getDays(strDateStart,strDateEnd){               var strSeparator = "-"; //日期分隔符   ...