<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. 湖大OJ-实验C----NFA转换为DFA

    实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...

  2. Signalr简单例子

    一.需要引用的 Js: 二.编码 用的是signalr2,需要新建Startup.cs类,编码如下: using Microsoft.Owin; using Owin; using System; u ...

  3. WebLogic 的一些基本概念

    WebLogic 中的基本概念 上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来,下面是一些基本概念. Domain : 域是作 ...

  4. 配置DNS服务器

    一.配置基本的DNS 服务器(包含正向解析和反向解析)域名:abc.com服务器IP:10.1.2.11 1. 编辑主配置文件/etc/named.conf---------------------- ...

  5. 数据库的点数据根据行政区shp来进行行政区处理，python定时器实现

    # -*- coding: utf-8 -*- import struct import decimal import itertools import arcpy import math impor ...

  6. App.config应用的说明

    对访问数据库的链接字符串的封装(MS什么都在封装,弄的我们原来越方(弱)便(智)),好吧,你可以解释说可以方便的更改链接只更改配置,而不用动主程序------隔离(隔离--保护:搞过配电的应该不陌生吧 ...

  7. 《R语言实战》读书笔记-- 第六章 基本图形

    首先写第二部分的前言. 第二部分用来介绍获取数据基本信息的图形技术和统计方法. 本章主要内容 条形图.箱型图.点图 饼图和扇形图 直方图和核密度图 分析数据第一步就是要观察它,用可视化的方式是最好的. ...

  8. 四大开源协议比较:BSD、Apache、GPL、LGPL (转)

    转自:http://www.lupaworld.com/portal.php?mod=view&aid=205552&page=all 本文参考文献:http://www.fsf.or ...

  9. 我的android学习经历33

    在Activity中添加菜单 1.在res目录下新建文件夹menu 右击res,选择new->Folder,Folder name写为menu 2.在新建的menu目录下新建一个xml文件 右击 ...

  10. 解决GitLab提交MergeRequest时，提示502 GitLab is not responding.的问题

    最近使用GitLab提交MergeRequest时,提示502 GitLab is not responding. 使用gitlab-ctl tail查看错误信息如下: 2014/10/28 11:5 ...