media语法:

  <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

  上面的media语句表示的是:当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面。

  含义:

    screen:指的是一种媒体类型;还可以选择all、print、TV等。

    and:关键词,与其相似的还有not,only。

    max-width: 600px:媒体特征,指当媒体小于600px时调用该样式

引入方法:

  1、link引入:

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

  2、@import引入

    @import url("css/reset.css") screen;

  3、@media引入:

    @media screen{ 选择器{ 属性:属性值; } }

css3整理--media的更多相关文章

  1. CSS3 之 Media(媒体查询器)

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

  2. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  3. 使用CSS3的@media来实现网页自适应

    如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去.越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至 ...

  4. 使用CSS3的@media来编写响应式的页面

    首先要知道,我们为什么要写自适应的页面(响应式页面) [直接看干货] 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱 ...

  5. css3之 media query 使用(转)

    原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...

  6. css3整理-方便查询使用

    最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...

  7. css3之Media Queries 媒体查询

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

  8. css3的@media媒体查询

    css3新功能,根据屏幕大小进行识别. 参考: http://www.runoob.com/cssref/css3-pr-mediaquery.html

  9. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

随机推荐

  1. tomcat支持https的server.xml配置

    访问地址:https://127.0.0.1/testWeb/mySevlet?url=123&action=aaa server.xml: <?xml version='1.0' en ...

  2. 290.单词模式。给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式。(c++方法)

    题目描述: 给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之 ...

  3. verilog语法实例学习(11)

    同步时序电路的一般形式 时序电路由组合逻辑以及一个或多个触发器实现.一般的架构如下图所示:W为输入,Z为输出,触发器中存储的状态为Q.在时钟信号的控制下,触发器通过加在其输入端的组合逻辑输入,使得电路 ...

  4. GraphQL入门1

    1. 资源: 主站: https://graphql.org/ 中文站: http://graphql.cn 入门视频: https://graphql.org/blog/rest-api-graph ...

  5. 解决netaddr不能安装0.7.6以上版本

    今天在Jenkins上添加了两个新jobs,但是同事提交代码后的自动测试运行出现错误.查看原因是tox命令在安装包依赖的时候,找不到大于0.7.6以上的版本,但可是我们明明安装过0.7.10了呀. 后 ...

  6. shell编程学习笔记(二):Shell中变量的使用

    变量在很多编程语言中都有,Shell中也不例外,我们下面看一下Shell中的变量怎么使用: 以下蓝色字体部分为Linux命令,红色字体的内容为输出的内容: # cd /opt/scripts # vi ...

  7. hyper-v的p2v工具

    1.Disk2vhd v1.64 可以在线p2v http://technet.microsoft.com/en-us/sysinternals/ee656415.aspx 2.物理机转换到HYPER ...

  8. ios实例开发精品源码文章推荐(8.28)

    iOS源码:游戏引擎-推箱子游戏 <ignore_js_op> http://www.apkbus.com/android-106392-1-11.html iOS源码:进度条-Color ...

  9. Apache Spark 2.3.0 重要特性介绍

    文章标题 Introducing Apache Spark 2.3 Apache Spark 2.3 介绍 Now Available on Databricks Runtime 4.0 现在可以在D ...

  10. KMP算法——从入门到懵逼到了解

    本博文參考http://blog.csdn.net/v_july_v/article/details/7041827 关于其它字符串匹配算法见http://blog.csdn.net/WINCOL/a ...