zoukankan      html  css  js  c++  java
  • 尚硅谷css3---媒体查询

    尚硅谷css3---媒体查询

    一、总结

    一句话总结:

    媒体查询主要是根据浏览器的特性(窗口大小、横竖屏、屏幕比例等)设置不同的样式,主要由三部分构成媒体类型(比如screen)、媒体属性(比如宽、高、屏幕类型)、关键字(and、only等)构成

    1、媒体查询由哪三部分构成?

    a、媒体类型:比如screen、print等
    b、媒体属性:比如宽、高、屏幕是横屏还是竖屏等
    c、逻辑操作符:not、and、only和逗号(,)

    2、媒体查询中常见的媒体类型有哪些?

    screen(各种屏幕,比如手机电脑等)、print(打印机)、all等

    3、媒体查询中常见的关键字有哪些?

    操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

    4、媒体查询中常见的媒体属性有哪些?

    width宽、height高、orientation屏幕是横屏(landscape)还是竖屏(portrait)、device-width 等

    二、媒体查询

    1、css3媒体查询

    css3媒体查询是响应式方案核心

    2、媒体类型

    all                  所有媒体(默认值)
    screen           彩色屏幕
    print              打印预览

    projection     手持设备
    tv                   电视
     braille           盲文触觉设备
     embossed     盲文打印机
     speech        “听觉”类似的媒体设备
     tty                 不适用像素的设备


    3、媒体属性

    width        (可加max min前缀)
    height         (可加max min前缀)
    device-width     (可加max min前缀)
    device-pixel-ratio(可加max min前缀,需要加webkit前缀)
    orientation   portrait竖屏
            landscape横屏

    4、操作符,关键字 (only,and,(,or),not)

    only:
      防止老旧的浏览器  不支持带媒体属性的查询而应用到给定的样式.
      @media only screen and (min-800px ){
                规则;
                规则
      }
      @media  screen and (min-800px ){
                规则;
                规则
      }
      在老款的浏览器下
        @media only    --->    因为没有only这种设备 规则被忽略
        @media screen --->   因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

      建议在每次抒写media query的时候带上only

    and:
      连接媒体属性 、连接媒体类型
      对于所有的连接选项都要匹配成功才能应用规则

    or(,) : 和and相似
      对于所有的连接选项只要匹配成功一个就能应用规则

    not:取反

     
  • 相关阅读:
    Cuckoo Hashing
    Microsoft Windows的消息循环
    Simplex, Full-Duplex and Half-Duplex Operation
    Linux 技巧:让进程在后台运行更可靠的几种方法
    https://learnku.com/docs/go-blog/qihoo/6532 。 heap size went up to 69G, with maximum garbage collection (GC)
    Go GC: Latency Problem Solved
    Sapphire: Copying GC Without Stopping the World
    The Go Blog Getting to Go: The Journey of Go's Garbage Collector
    xml CDATA
    Joseph cicyle's algorithm
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12343607.html
Copyright © 2011-2022 走看看