2404
浏览量
5
粉丝
7
关注

CSS Media Queries 详细介绍


2020-08-07 20:59:12 102 0

CSS Media Queries 详细介绍

在制作RWD 响应式网页时,一定会用到的CSS 语法就是media,代表的就是针对指定的「媒体」设定样式,这篇将会对CSS 的Media Queries 做个详细介绍,也帮助自己未来撰写时,更有个方向与参考。

CSS Media Queries 是什么?

Media Queries 代表网页会先「询问query」「媒体media」的属性,再针对这些属性定义样式,通常在CSS 里并没有大多都是权重大小「覆盖」的方式,但media 本身却带有些「逻辑」的概念,透过逻辑的写法,如果媒体条件符合为true,就会套用样式,反之为false 就不会套用样式。

如果要使用media queries,共有下列三种使用方式:

  • 在HTML 内使用

    如果在html 里加入下面的程式码,在视窗screen 时会使用style.css,列印时则使用print.css。

    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    
  • 在CSS 内使用

    如果直接写在CSS 里,下列的写法也是一样的概念。

    @media screen{
      样式...
    }
    @media print{
      样式...
    }
    
  • 使用@import

    如果你喜欢使用@import,也可以根据不同的media特性,import不同的css。

    @import "style.css";
    @import "print.css" print;
    

Media 的类型( Media Types )

在CSS Level 4 普及后( 没错,写这篇文章时,Level 4 即将是主流了),主要的Media 类型有以下四种。( tty、tv、projection、handheld、braille、embossed 和aural 因为在Level 4 已经描述未来不支援,就不再多做介绍。)

类型 说明
all 所有装置。
print 印刷装置,包含使用列印预览产生的所有画面( 例如列印为pdf )。
screen 萤幕装置,不属于print 和speech 的设备。
speech 朗读装置,针对可以「读出」页面的设备。

Media 的特征( Media Fratures )

Media类型是大方向,那么特征Feature就是小分类,可以做到更细微的判断与设定,跟类型不同的是,Feature必须要使用括号( )包覆,甚至可以和逻辑关键字结合,此外,如果具备Range性质的Feature,也可在开头加上min-max-的标示,以下将特征作为几个大分类。( device-width、device-height、device-aspect-ratio、handheld、braille、embossed和aural因为在Level 4已经描述未来不支援,就不再多做介绍。)

视窗或页面尺寸( Viewport/Page Dimensions )

特征 说明
width 萤幕宽度,支援max-widthmin-width
height 萤幕高度,支援max-heightmin-height
aspect-ratio 萤幕长宽比例,支援max-aspect-ratiomin-aspect-ratio(长宽比的写法格式为1/1、1680/720...等)
orientation 萤幕旋转方向,有两个选项:portraitlandscape( portrait为直向,landscape为横向)

显示品质( Display Quality )

特征 说明
resolution 解析度( dpi、ppx...等),支援max-resolutionmin-resolution
scan 电视扫描方式,有两个选项:interlaceprogressive( interlace为交错式扫描,奇数偶数扫描线交错,progressive为渐进式扫描,是现在大多数电视采用的方式)
update 更新媒体,有三个选项:noneslowfast( none表示不会更新的显示装置,例如印出来的文件,slow表示更新速度慢的显示装置,fast表示更新速度快的装置,例如电脑萤幕)
overflow-block 当内容包含block特性并超过边界范围,有四个选项:nonescrolloptional-pagedpaged( none表示任何超过范围都不显示,例如看板,scroll表示可滚动查看超出范围,例如电脑萤幕,optional-paged表示可手动查看超出的内容,例如简报,paged表示超出的内容会以分页显示,例如印表机)
overflow-inline 当内容包含inline特性并超过边界范围,有两个选项:nonescroll
grid 网格媒体,两个选项:01

颜色( Color )

特征 说明
color 输出装置的色彩位元数,若数值为0则代表黑白装置,支援max-colormin-color
color-index 输出装置的色彩索引位元数,支援max-color-indexmin-color-index
monochrome 单色媒体功能,若数值为0 表示「不是」单色设备。
color-gamut 输出装置色域,有三个选项:srgbp3rec2020(绝大多数的显示器都支援srgb,而p3的色域比srgb更广且包含srgb,rec2020比p3更大且包含p3 )

互动( Interaction )

特征 说明
pointerany-pointer 指标装置(例如滑鼠)的准确性,有三个选项:nonecoarsefine( none表示没有指标装置,coarse表示精度较差的指标装置,像是触控萤幕,fine表示精度比较高的装置,像是滑鼠或手写笔)
hoverany-hover 装置具备hover的能力,有两个选项:nonehover

CSS Media Queries 应用实例

Queries有四种使用方式,分别是orandnotonly,除了or使用逗号「,」表现,其他的就直接写出英文字,下列应用实例分别使用这四种方式来表现。

  • OR

    OR「或者」这个概念很容易理解,例如:萤幕尺存小于等于400px 「或」印刷时,字体会变成红色100px,反之就是黑色30px。( 打开范例页面,点击滑鼠右键按印刷,就能看到效果 )

    CSS Media Queries 应用实例1:OR

      h1{
          font-size:30px;
      }
      @media (max-width:400px), print{
          h1{
              font-size:100px;
              color:red;
          }
      }
    

    另外一个例子,透过orientation 判断装置是直立或横放,如果装置是直立「或」宽度小于200px,就让文字变成红色50px。

    CSS Media Queries 应用实例2:OR

      h1{
          font-size:30px;
      }
      @media (orientation: portrait), (max-width:200px){
          h1{
              font-size:50px;
              color:red;
          }
      }
    

  • AND

    使用AND 必须要所有条件皆满足,下面的例子在「萤幕」大小介于「200px~300px」之间时,字体会是红色50px。( 从这个例子可以很明显观察到,type 不用加上括号,而features 要用括号包覆 )

    CSS Media Queries 应用实例3:AND

      h1{
          font-size:30px;
      }
      @media screen and (min-width:200px) and (max-width:300px){
          h1{
              font-size:50px;
              color:red;
          }
      }
    

    AND 和OR 也可以互相搭配使用,已下面的例子来说,除了「萤幕」大小介于「200px~300px」之间时,字体会是红色50px,横向印刷也会是红色50px 的字体。( 可列印网页,选择横向列印看结果 )

      h1{
          font-size:30px;
      }
      @media screen and (min-width:200px) and (max-width:300px), print and (orientation: landscape){
          h1{
              font-size:50px;
              color:red;
          }
      }
    
  • ONLY

    ONLY 可以指定「只有」某种装置媒体才能套用某些样式,会写在media query 的字首,?目前这种撰​​写方式越来越少见,最主要是因为使用旧版装置媒体的人越来越少,因此直接采用AND 或OR 的写法就能够符合绝大多数的需求。在CSS Level 4 的众多范例里,也只出现了下方这个短短一行代码范例,可见有多不常用,下面这行代表只有在「彩色萤幕」才会套用example.css。

      <link rel="stylesheet" media="only screen and (color)" href="example.css" />
    

    其实上面这行也可写成这样,也是一样的结果。

      <link rel="stylesheet" media="screen and (color)" href="example.css" />
    
  • NOT

    NOT的目的在于排除一些装置媒体,会写在media query的字首,下方的例子就是除了彩色萤幕之外的装置,都套用example.css,这里要注意一下,NOT和ONLY后方都必须先接media type (像是screen或print ),不然会没有作用

      <link rel="stylesheet" media="not screen and (color)" href="example.css" />
    

    NOT 可以使用逗号分隔,就能做出不同的判断,下方的例子,除了萤幕宽度小于等于300px,或印刷时为横向,才会出现红色50px 的字体。

      h1{
          font-size:30px;
      }
      @media not screen and (max-width:300px), print and (orientation: landscape){
          h1{
              font-size:50px;
              color:red;
          }
      }
    

小结

其实CSS Media Queries 并没有很复杂,尤其在现在电脑或手机萤幕发达的时代,大多情况只需要注意max-width、min-width 就能解决,其他充其量就是注意印刷的样式、注意单色的萤幕. ..等特殊情况而已,总而言之,善用Media Queries 对于撰写一个RWD 网页,是绝对必要的技能呦!

  <div class="social-icon show">
    <a class="icon-home" href="/index.html"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Back Home</font></font></span></a>
    <a class="icon-list" href="/list.html"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Article List</font></font></span></a>
    <a class="icon-facebook" target="_blank" href="http://www.facebook.com/share.php?u=https://www.oxxostudio.tw/articles/201810/css-media-queries.html"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Share on Facebook</font></font></span></a>
    <a class="icon-google" target="_blank" href="https://plus.google.com/share?url=https://www.oxxostudio.tw/articles/201810/css-media-queries.html"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Share on Google+</font></font></span></a>
    <a class="icon-twitter" target="_blank" href="http://twitter.com/home/?status=https://www.oxxostudio.tw/articles/201810/css-media-queries.html"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Share on Twitter</font></font></span></a>
    <a class="goto-top"><i></i><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Back to Top</font></font></span></a>
  </div>
  <a class="arrow arrow-left show" href="/articles/201810/google-maps-20-get-current-position.html" title="Google Maps API - 取得目前经纬度并标记">
    <i></i>
  </a>
  <a class="arrow arrow-right show" href="/articles/201811/css-font-family.html" title="CSS Font Family 详细介绍">
    <i></i>
  </a>

</article>
精彩评论
暂无评论