zoukankan      html  css  js  c++  java
  • 响应式web之媒体查询(一)

      HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性,扩展了媒体类型的功能。

      媒体查询既可以在样式表中使用也可以在link中使用,甚至可以指定应用的样式表。

    <!-- 在link中使用媒体查询 -->
    <
    link rel="stylesheet" type="text/css" media="screen and (min-800px)" href="style.css"/>

    //在css样式表中使用媒体查询
    @media screen and (min-800px) {
        p{
            color:#ff00ff;
        }
    }
    //在css样式表中引用其他的样式表
    @import url('path/common.css') screen and (min-800px);

      screen代表设备是显示屏,and连接的是媒体的特性,如上面的代码表示显示屏的最小宽度是800px,如果设备既是显示屏,显示屏的宽度大于等于800px,那么就加载样式表或应用样式。

  • 相关阅读:
    jmeter取样器
    【递归】普通递归关系
    7月,开始奋斗吧!
    BZOJ 1503 郁闷的出纳员
    bzoj 3262: 陌上花开
    BZOJ 2286 消耗战
    莫队
    bzoj1483: [HNOI2009]梦幻布丁
    字符串算法模板
    高级数据结构模板
  • 原文地址:https://www.cnblogs.com/luoshufang/p/5715222.html
Copyright © 2011-2022 走看看