zoukankan      html  css  js  c++  java
  • 关于css中@media的基本使用方法

    @media这个规则包含条件声明,可用于为特定屏幕指定样式,这些声明可以包含屏幕大小,在适屏样式中会很有用.

    基本语法:

    @media +(and | not  | only) + 媒体类型 +(and+ 媒体查询)

    1.媒体类型

    常用的不多,就几个:screen(电脑屏幕) ,print (打印或者打印预览),all(所有设备),作用就是用来匹配查询条件的,就是你是要以什么标准去匹配,是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配

     2.媒体查询

    (and+媒体查询),这个是用来限制查询条件的,例如当屏幕小于最大宽度时,@media中的class就起作用了

    例子:当屏幕宽度小于678px的时候,.box类的背景颜色为红色

    @media screen and (max-678px){

    .box {

    }

    }

    当然你的媒体查询条件也可以有多个限制

    例子:当屏幕宽度在678px到992px之间时,.box类的背景颜色为红色

    @media screen and (min-678px) and (max-992px){

    .box {

    }

    }

     3.关键字(修饰词)

    最后是关键字(修饰词):and,not,only

    先说only,用来匹配媒体类型,表示只对该媒体类型适用,用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

    例子:只对screen类型起作用,对于print等其他设备不起作用

    @media only screen and (max-678px){

    .box {

    }

    }

    not就是对于除了该媒体类型的其他类型起作用,该关键字是用来排除某种制定的媒体类型

    例子:对于screen类型不起作用,其他类型起作用

    @media not screen and (max-678px){

    .box {

    }

    }

  • 相关阅读:
    JUnit-执行测试
    JUnit注释的执行顺序
    回文数字
    JUnit简单测试
    利用jspx解决jsp后缀被限制拿shell
    wifi破解到局域网渗透
    爬虫之一:爬补天厂商数据(爬虫)
    三位一体的漏洞分析方法-web应用安全测试方法
    json.dumps错误:'utf8' codec can't decode byte解决方案
    nmap小技巧[1] 探测大网络空间中的存活主机
  • 原文地址:https://www.cnblogs.com/dingxinwen/p/13297981.html
Copyright © 2011-2022 走看看