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. [前端] 记录工作中遇到的各种问题(Bug,总结,记录)

    最近一年,在开发实践过程中遇到了不少问题,大多都能得到解决 部分知其原理,部分只能做到解决问题,而半年前遇到的问题,或多或少都忘得差不多了 是该记录一下一些问题,防止再遇到就得再查资料了 1. 浏览器 ...

  2. 经验:使用 Cache 时注意 DateTime.Now

    如果使用了缓存,比如方法 A 吧,那么你需要注意 DateTime.Now 对缓存的影响,简单来说,DateTime.Now 可能出现在两个地方: 在调用方,将 DateTime.Now 作为参数传递 ...

  3. 在 Gradle 中使用 MyBatis Generator

    在 Intellij IDEA 中结合 Gradle 使用 MyBatis Generator 逆向生成代码 Info: JDK 1.8 Gradle 2.14 Intellij IDEA 2016. ...

  4. 防止UI界面被输入法遮挡(画面随输入法自适应)

    应用过Android手机的朋友都知道,有时候在文本框中输入文字后,操作按钮被输入法遮挡了,不得不关闭输入法才可以继续操作. 比如下面这个画面: 画面布局: <?xmlversion=" ...

  5. from String value ('{}'); no single-String constructor/factory

    需要为类增加一个接受String的构造函数: 例如: public class B { private String name; public B(String b) { } public Strin ...

  6. 使用log4net将C#日志发送到Elasticsearch

    一.安装Elasticsearch 参考前面写的文章:https://www.cnblogs.com/songxingzhu/p/7909486.html 安装完Elasticsearch后,修改/e ...

  7. weex开发错误汇总

    weex run serve 报UglifyJS错 ANDROID_HOME环境变量 weex build android需要ANDROID_HOME, 请配置 D:\adt-windows-x86_ ...

  8. 拯救者y720 双显卡, nvidia 1060 ,Ubuntu16.04 安装 Nvidia 显卡驱动

    为了能够记录,下次可以有参考的东西,就记录如此 多谢网上大牛的帖子,我都是安装您们的才顺利的一次性,无黑屏现象的完成了安装 1. 参考: 1.secure boot option ( 开机进入bios ...

  9. OpenCV 学习笔记 07 目标检测与识别

    目标检测与识别是计算机视觉中最常见的挑战之一.属于高级主题. 本章节将扩展目标检测的概念,首先探讨人脸识别技术,然后将该技术应用到显示生活中的各种目标检测. 1 目标检测与识别技术 为了与OpenCV ...

  10. [Aaronyang] 写给自己的WPF4.5 笔记10[层次数据需求处理,TreeView绿色文章1/4]

     我的文章一定要做到对读者负责,否则就是失败的文章  ---------   www.ayjs.net    aaronyang技术分享 AY留言: 文章根据难易,我根据游戏的规则进行了分色,希望读者 ...