媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),也是最常见的三种媒体类型。

媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：

link方法

通过link标签中的media属性来指定不同的媒体类型
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
@import方法

第一种：
在样式中通过@import调用另一个样式文件

<style type="text/css">

@importurl(reset.css) screen;  屏幕

@importurl(print.css) print;  打印

</style>
第二种：
在<head>中的<style>标签中引入媒体类型方法。
<head>

<style type="text/css">

@importurl(style.css) all;

</style>

</head>

@media方法
第一种，在样式文件中引用媒体类型：
<style type="text/css">

@media screen {

选择器{/*你的样式代码写在这里…*/}

}

</style>
第二种，在<head>标签中的<style>中引用。

<head>

<style type="text/css">

@media screen{

    选择器{/*你的样式代码写在这里…*/}

}

</style>

</head>




最大宽度max-width

@media screen and (max-width:480px){

.ad {

display:none;

}

}

当屏幕小于或等于480px时,页面中的（.ad）都将被隐藏。






最小宽度min-width

@media screen and (min-width:900px){

.wrap{width: 980px;}

}

当屏幕大于或等于900px时，“.wrap”的宽度为980px。




多个媒体特性使用

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”





@media screen and (min-width:600px) and (max-width:900px){

body {background-color:#f5f5f5;}

}




iPhone、iPad等，还可以根据屏幕设备

“max-device-width”或“min-device-width” 所指的是设备的实际分辨率，也就是指可视面积分辨率。





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

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px




												


											
Media Queries——媒体类型的更多相关文章
	

    
								
  1. Media Queries 媒体类型
		
    引用方法:1.<link rel="stylesheet" type="text/css" href="style.css" medi ...
    
		
    2. 
						
  2. css3之Media Queries 媒体查询
		
    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性:  ...
    
		
    3. 
						
  3. media query(媒体查询)和media type(媒体类型)
		
    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media  ...
    
		
    4. 
						
  4. media queries 媒体查询使用
		
    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
    
		
    5. 
						
  5. Media Queries 媒体查询
		
    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
    
		
    6. 
						
  6. CSS media queries  媒体查询
		
    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
    
		
    7. 
						
  7. Media Queries媒体查询
		
    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
    
		
    8. 
						
  8. 样式link属性media用法--媒体类型查询
		
    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
    
		
    9. 
						
  9. Media Queries 媒体查询常见设备断点
		
    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 基础笔记（一）Java 集合
			
    集合日常用到的有List,Set,Map等等. List List常用的有2种,包括ArrayList与LinkedList.这两种List的主要区别在于底层的数据结构的差别.ArrayList是基于 ...
    
			
    2. 
						
  2. Android中常用适配器及定义自己的适配器
			
    转载:http://blog.chinaunix.net/uid-11898547-id-3303153.html http://www.tudou.com/home/_328390108/item  ...
    
			
    3. 
						
  3. Android OkHttp详解
			
    来源 http://frodoking.github.io/2015/03/12/android-okhttp/ 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技 ...
    
			
    4. 
						
  4. Android ExpandableListView的技巧和问题
			
    前言: 最近一个多月在认真的学习Android和做项目,文章内容表达的不好或者理解错了,希望大家评论指出. :-) 本文是总结几个比较常用且使用的技巧,和一个大家都会遇到的问题. 文章中大部分语句摘抄 ...
    
			
    5. 
						
  5. linux安装
			
    1.rpm: • RPM是软件包管理工具,是Redhat Package Manager的缩写,最早由redhat公司引入的,现在已经成为公认的行业标准了.• 什么是package• 简单地说就是归档 ...
    
			
    6. 
						
  6. [改善Java代码]推荐使用枚举定义常量
			
    枚举和注解都是在Java1.5中引入的,虽然他们是后起之秀,但是功能不容小觑,枚举改变了常量的声明方式,注解耦合了数据和代码. 建议83:推荐使用枚举定义常量 一.分析 常量的声明是每一个项目中不可或 ...
    
			
    7. 
						
  7. linux进程间通信概述
			
    一个大型的应用系统,往往需要众多进程协作,进程间通信的重要性显而易见. 进程间通信有如下一些目的: 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几兆字节之间. 共享数据: ...
    
			
    8. 
						
  8. mysql 慢执行分析工具explain/desc
			
    一.如何操作 explain + 增删改查语句; 二. 输出格式 possible_keys  mysql在搜索表记录时可能使用哪个索引. key  实际使用的索引,如果没有索引被使用,则为null. ...
    
			
    9. 
						
  9. 执行asp.net上传下载Excel时出现“未在本地计算机上注册“Microsoft.ACE.Oledb.12.0”提供程序。(System.Data)”错误
			
    服务器没有安装Office导致的错误,如何不想安装庞大的Office,可以下载安装: Microsoft Office Access Database Engine 2007 http://downl ...
    
			
    10. 
						
  10. CSS行高--line-height
			
    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...
    
			
    11.