zoukankan      html  css  js  c++  java
  • 媒体查询

    预定义的媒体类型:

    1.screen:媒体样式表的写法:

    <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
    

     2.print:媒体样式表的写法:

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

    媒体查询的一个逻辑表达式,其结果为真(true)或假(false)。

    媒体查询例子:

    1.

    <--!应用于支持指定特性(彩色)的特殊媒体类型(‘screen’)-->
    <link rel="stylesheet" media="screen and (color)" href="example.css">
    
    <--!写在CSS的@import-rule语句中-->
    @import url(color.css) screen and  (color);
    

     2.适用于所有媒体类型的简写语法,关键字all和and可以省略:

    @media (orientation:portrait){...}
    @media all and (orientation:portrait){...}
    

     3.满足特殊需求的复杂查询:

    @media all and (max-698px) and (min-520px),(min-1150px){
        body{
            background:#ccc;
        }       
    }        
    

    媒体特性:

    1.width和device-width;

    2.height和device-height;

    3.orientation;

    4.aspect-ratio和device-aspect-ratio;

    5.color和color-index;

    6.monochrome(如果不是monochrome设备,则等于0);

    7.resolution;

    8.scan(指tv输出设备的扫描过程);

    9.grid(指输出设备为栅格型或位图型)

  • 相关阅读:
    day38 04-Spring加载配置文件
    day38 03-Spring的IOC和DI的区别
    day38 02-Spring快速入门
    关于mysql-connector-net在C#中的用法
    SQL的四种连接用法整理
    SQL的四种连接用法整理
    SQL的四种连接用法整理
    45道CSS基础面试题
    45道CSS基础面试题
    45道CSS基础面试题
  • 原文地址:https://www.cnblogs.com/gly1120/p/9024325.html
Copyright © 2011-2022 走看看