C3媒体查询的俩种常用方式

媒体类型做为CSS常用的属性在应对不同设备屏幕上面起着非常重要的作用，其中最常用的俩种方式如下：

1.link方法

link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型，这种方式跟着引用的样式文件走，代码如下

1 <link rel = "stylesheet" type= "text/css" href="style.css" media="screen"/>
2 <link rel = "stylesheet" type= "text/css" href="print.css" media="print"/>

2.@media方法

@media 是CSS3中新引进的一个特性，称为媒体查询，在页面中也可以通过这个属性来引入媒体类型，在css文件中引用媒体类型的代码如下

@media screen {
   选择器{/*样式代码写在这里*/}
}

补充内容：媒体特性（Media Query）

媒体特性（Media Query）是CSS3对媒体类型（Media type）的增强版，相当于"Media type(判断条件)+CSS样式（符合条件的样式规则）",简单实例

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

2.@media 方式
@media screen and (max-width:600px){
  选择器{/*样式代码*/}
}

上面代码表示当媒体为电脑屏幕或者媒体类型小于或等于600px时样式生效

 

转载于:https://www.cnblogs.com/webcp/p/5312642.html