CSS3中媒体查询,更换样式表
<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中媒体查询,更换样式表的更多相关文章
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- CSS3@media媒体查询
CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
- CSS3 之媒体查询Media Query
Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- 第四章 在MVC4.0中对脚本以及样式表的引用变化
原文:http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 一.可以直接使用“~”,而无需使用Href对象 ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- 初识CSS3之媒体查询(2015年05月31日)
一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
随机推荐
- 【002: NetBeans 的 代码补全】
在 代码完成中,输入如下内容 q;w;e;r;t;y;u;i;o;p;a;s;d;f;g;h;j;k;z;x;c;v;b;n;m;Q;W;E;R;T;Y;U;I;O;P;A;S;D;F;G;H;J;K ...
- 【转】有监督训练 & 无监督训练
原文链接:http://m.blog.csdn.net/article/details?id=49591213 1. 前言 在学习深度学习的过程中,主要参考了四份资料: 台湾大学的机器学习技法公开课: ...
- MVC(二)
所谓EF延迟加载,就是使用Lamabda或Linq查询数据时,EF并不会将数据直接查询出来,而是在用到的这个查询结果的时候才会加载到内存中.延迟加载也可以理解成 按需加载,顾名思义,就是按照所需的数据 ...
- 如何利用php array_multisort函数 对数据库排序
数据库中有4个字段分别是id,volume,edition,name. 要求对查询结果按照volume+edition从大到小排序.下面将一下array_multisort函数array_multis ...
- transient关键字
transient关键字的英文意思是:瞬态,由此可见是瞬间的,不可固定的. 会不会与对象的状态等等有关系呢? 网上找了一下资料是跟对象的序列化有关. transient的作用 一个对象只要实现了Ser ...
- java语言的认识
class Hello{ public static void main(String [] args) { System.out.println("Hello Word 你好") ...
- RCP:如何保存TaskList及如何获取TaskList
如果我们在Eclipse RCP程序中添加TaskList View,用来管理Task或者TODO项,如下代码: PlatformUI.getWorkbench().getActiveWorkbenc ...
- dojox.grid.DataGrid
创建表格 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" style=&q ...
- Bootstrap_响应式网格系统
首先添加CSS样式: [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } [class *= col-] [class ...
- Java动态代理的两种实现方式:
方式一:传统的代理 package cn.hc.domain; import java.lang.reflect.InvocationHandler; import java.lang.reflect ...