引用外部样式使用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用法--媒体类型查询的更多相关文章

  1. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  2. Media Queries——媒体类型

    媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式. 在CSS2中常碰到的就是all(全部).screen(屏幕).pri ...

  3. Media Queries 媒体类型

    引用方法:1.<link rel="stylesheet" type="text/css" href="style.css" medi ...

  4. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  5. link标签的media属性的用法

    <link rel=stylesheet" type="text/css" href="print.css" media="scree ...

  6. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  7. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  8. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

  9. CSS3 之 Media（媒体查询器）

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

随机推荐

  1. FreeBSD打开DTrace支持

    主要翻译自:https://wiki.freebsd.org/DTrace FreeBSD跟Linux发行版一个比较大的差异,就是提倡源码构建.因此这里提到比较多的编译开关设置.自2012年5月后,D ...

  2. PAT (Basic Level) Practise：1031. 查验身份证

    [题目链接] 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9, ...

  3. HDU 2274 Magic WisKey

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2274 Magic WisKey Time Limit: 2000/1000 MS (Java/Othe ...

  4. UVa 二叉树重建(先序+中序求后序)

    题意是给出先序和中序,求出后序. 先序遍历先访问根结点,通过根结点可以在中序中把序列分为左子树部分和右子树部分,我建了一个栈,因为后序遍历最后访问根结点,所以把每次访问的根结点放入栈中.因为后序遍历先 ...

  5. [cyber security][php]pfSense目录遍历漏洞分析

    0×00 导言 pfSense是一个基于FreeBSD,专为防火墙和路由器功能定制的开源版本. 在本文中,我们将向大家介绍在pfSense的2.1.3以及更低版本中的CVE-2014-4690漏洞:对 ...

  6. 蓝牙协议栈中的 OSAL

    蓝牙协议栈里的操作系统叫做 OSAL(操作系统抽象层).它并非一个真正意义上的操作系统,它只是实现了操作系统的一些功能,如任务切换.内存管理. OSAL 产生的根源:基于蓝牙协议栈开发的产品,实际上是 ...

  7. Fragment使用findFragmentById返回null

    @Override public void onClick(View v) { switch (v.getId()){ case R.id.btn1: replaceFragment(new Anot ...

  8. 解决Selenium Webdriver执行测试时，每个测试方法都打开一个浏览器窗口的问题

    虽然把WebDriver定义为一个静态变量了,但是每次执行测试都要打开多个窗口,挺浪费时间的. 找了很多中方法,比如使用setUpClass, BeforeSuite都没有完全解决问题.后来无意间发现 ...

  9. JavaScript常用函数和方法

    alert('Hello World!') //方法用于显示带有一条指定消息和一个 OK 按钮的警告框. //定义js函数 function Foo(name) { console.log(name) ...

  10. java连接mysql ：No Suitable Driver Found For Jdbc 解决方法

    今天出现编码出现了No suitable driver found for jdbc,又是找遍了网上的资料,基本上都说是以下个问题:    一是:连接URL格式出现了问题(Connection con ...