Media Queries——媒体类型
媒体类型（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——媒体类型的更多相关文章
- Media Queries 媒体类型
引用方法:1.<link rel="stylesheet" type="text/css" href="style.css" medi ...
- css3之Media Queries 媒体查询
一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- 样式link属性media用法--媒体类型查询
引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
随机推荐
- 熟练掌握HDFS的Shell访问
HDFS设计的主要目的是对海量数据进行存储,也就是说在其上能够存储很大量文件 (可以存储TB级的文件).HDFS将这些文件分割之后,存储在不同的DataNode上, HDFS 提供了两种访问接口:Sh ...
- ie F12开发工具出不来
IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...
- IDL中File_Search函数用法详解(转)
来自:http://blog.sina.com.cn/s/blog_764b1e9d01014ajp.html 在利用IDL进行批处理时,通常用到file_search函数进行输入路径文件的搜索,现根 ...
- 使用jquery实现局部刷新DIV
实现页面的定时刷新功能:jquery使用的是jquery-1.8.3.min.js1:定时刷新 A界面的一段代码如下:<script type="text/javascript&quo ...
- 基于BaseHTTPServer的简单存储服务器
服务器代码: from BaseHTTPServer import BaseHTTPRequestHandler from BaseHTTPServer import HTTPServer impor ...
- 给jdk写注释系列之jdk1.6容器(7)-TreeMap源码解析
TreeMap是基于红黑树结构实现的一种Map,要分析TreeMap的实现首先就要对红黑树有所了解. 要了解什么是红黑树,就要了解它的存在主要是为了解决什么问题,对比其他数据结构比如数组,链 ...
- hdu 4000 树状数组
思路:找出所有 a<b<c||a<c<b的情况,在找出所有的a<b<c的情况.他们相减剩下就是a<c<b的情况了. #include<iostre ...
- nodejs3-事件zepto.js事件
Event代表事件名,listener代表事件处理函数,括号内的参数代表可选参数: addListener(event,listener):对指定事件绑定事件处理函数 on(同上):addListen ...
- 32位和64位Ghost版Win8.1系统大全下载最新版
Ghost版Win8.1系统企业版,下载完成后一定要使用校验工具验证GHO文件MD5值,如果不符请不要安装,不然安装失败后果自负.GHO文件路径一定不要带中文,否则无法安装.安装完成第一次进入桌面会黑 ...
- Could not delete folder on Win7
I had the same problem on Win 7 and this worked for me in command prompt. Solution 1: RD/S pathname ...