样式link属性media用法--媒体类型查询
引用外部样式使用link
你可能想针对将要显示页面的设备类型(桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本)来调整页面的样式，可以利用一个media属性，
在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。
<link href="..." rel="stylesheet" media="screen and (max-device-width=480px)" />
<link href="..." rel="stylesheet" media="print" />
查询中有很多属性可以使用，如依赖设备实际屏幕的大小(min-device-width、max-device-width)，使用浏览器窗口大小(max-width、min-width)，以及显示方向[ orientation，这个可以时横向（landscape）或纵向（portrait）]，
此外还有很多其他的属性。可以根据需要为html增加多个<link>标记，涵盖你要支持的所有设备。
在css中增加媒体查询
要为CSS指定有特定属性的设备，还有一种方法：不是在link标记中使用媒体查询，还可以直接写在CSS中。
采用这种方式，@media规则中只包含特定于中媒体类型的CSS规则。在CSS文件中，要把对所有媒体类型都通用的规则放在@media规则下面，
这样一来，就不会不必要的重复规则了。另外浏览器加载页面时，它会通过媒体类型来确定页面适用的规则，而将不匹配的规则忽略。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="static/css/test.css" rel="stylesheet" media="screen and (min-width:1024px)" />
<link href="static/css/test.css" rel="stylesheet" media="screen and (max-width:1024px)" />
</head>
<body>
<div class="div_test">
hello world！！！
</div>
</body>
</html>
test.css样式文件:
@media screen and (min-width:1024px)
{
.div_test{
font-size:50px;
font-family:'Times New Roman';
font-style:oblique; color: #000000;
background-color: #808080;
margin:30px;
padding:50px;
padding-left:100px;
border: dashed 1px #0cf60a;
border-radius:5px;
}
} @media screen and (max-width:900px)
{
.div_test{
font-size:50px; font-style:oblique; background-color: #b6ff00;
margin:30px;
padding:50px;
padding-left:100px;
border: double 1px #0cf60a;
border-radius:5px;
}
}
样式link属性media用法--媒体类型查询的更多相关文章
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- Media Queries——媒体类型
媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式. 在CSS2中常碰到的就是all(全部).screen(屏幕).pri ...
- Media Queries 媒体类型
引用方法:1.<link rel="stylesheet" type="text/css" href="style.css" medi ...
- css3之Media Queries 媒体查询
一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...
- link标签的media属性的用法
<link rel=stylesheet" type="text/css" href="print.css" media="scree ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- CSS3 之 Media（媒体查询器）
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
随机推荐
- Android 学习第9课，java android 项目的安装与启动过程
android 安装过程: 开发工具先把.java文件转换成.class,然后转换成dx,再签名打包成apk,最后在设备上执行 adb install c:\xxx.apk android 启动过程: ...
- 如何快速编写Vim语法高亮文件
这里有一份中文的入门文档,但是太长了,不想读,所以有本文 最快的办法,就是找一个语法相近的语法高亮文件,稍微改一下 自己从头写的话,首先搞定关键字: syntax case match "是 ...
- 关于配置服务器（IIS7）
服务器Server2003 ,无限开机动画慢动作重播,一怒而重装server2008 然,重点就是系统装好了 IIS装好了 ,发布网站 开始各种错了!!! 1.第一个错 额,错误信息说 :由于权限不足 ...
- ctype.h / cctype 中的字符函数
函数名称 返回值 isalnum() 字母或数字 isalpha() 字母 iscntrl() 控制字符 isdigit() 数字(1 ~ 9) isgraph() 除空格之外的打印字符 islowe ...
- 认识C++中的临时对象temporary object 分类： C/C++ 2015-05-11 23:20 137人阅读 评论(0) 收藏
C++中临时对象又称无名对象.临时对象主要出现在如下场景. 1.建立一个没有命名的非堆(non-heap)对象,也就是无名对象时,会产生临时对象. Integer inte= Integer(5); ...
- C语言中的 extern 关键字
今天在 BLE 中看到很多 extern 关键字,现在总结一下: extern 关键字主要用于在一个c文件中要用到另一个c文件中的变量或者函数. example: #extern_base.c ; # ...
- python 元组操作
关于元组的常用操作,请参考:http://www.runoob.com/python/python-tuples.html 元组的元素不可修改 ,元组的元素的元素可修改 count(self,valu ...
- 如何有效的使用C#读取文件
如何有效的使用C#读取文件 你平时是怎么读取文件的?使用流读取.是的没错,C#给我们提供了非常强大的类库(又一次吹捧了.NET一番),里面封装了几乎所有我们可以想到的和我们没有想到的类,流是读取文件 ...
- RESTful API的重磅好伙伴Swagger2
本文将介绍RESTful API的重磅好伙伴Swagger2,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档. 它既可以减少我们创建文 ...
- mongoose学习文档
名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 来自cnode社区 1.创建一个 ...