首页  »   HTML/CSS

CSS3-Media Queries

网友分享于:2013-12-18  浏览:0次
CSS3-----Media Queries

一,概念

     Media Query:媒体查询.

    CSS3中引入方式, demo:

   <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

 

二, Media Type

媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式,在css2中我们常碰到的就是 all(全部),screen(屏幕),print(页面打印或打邱预览模式),其实在媒体类型不止这三种,w3c总共列出了10种媒体类型。

 1),link方法引入

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

 2), xml方式引入

      <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?> 

 3),@import方式引入

@import引入有两种方式,一种是在样式文件中通过@import调用别一个样式文件;另一种方法是 在<head>>/head>中的<style>...</style>中引入,单这种使用方法在 ie6-7都不被支持.

   demo: @import url("css/reset.css") screen;

 4), @media引入

 @media screen{

      选择器{

     属性:属性值;

      }

    }

三, Media Query

Media Query是CSS3 对Media Type的增强版,其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),常用的特性w3c共列出来13种。

   常用如下:

  

 在Media Query中如果没有明确指定Media Type,那么其默认为all.

  demo:

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" 
href="style.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
type="text/css" href="iphone4.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" 
type="text/css" /> 
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" 
type="text/css" />

     <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

更多demo可参考:  https://www.w3.org/TR/css3-mediaqueries/#media1

 

 

四,兼容性

    dd1f503e-835f-3b63-81ae-fec17d2ccccb.png (490×200)

 

参考: https://www.w3cplus.com/content/css3-media-queries

 

 

 

 

相关解决方案

最新解决方案