详解CSS3中Media Queries的相关使用


Posted in HTML / CSS onJuly 17, 2015

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果

@media 媒体类型and (媒体特性){你的样式}

    最大宽度max-width

“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

CSS Code复制内容到剪贴板
  1. @media screen and (max-width:480px){   
  2.  .ads {   
  3.    display:none;   
  4.   }   
  5. }  

上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。

    最小宽度min-width

“min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。

CSS Code复制内容到剪贴板
  1. @media screen and (min-width:900px){   
  2. .wrapper{width980px;}   
  3. }  

上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。

    多个媒体特性使用

当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。

CSS Code复制内容到剪贴板
  1. @media screen and (min-width:600px) and (max-width:900px){   
  2.   body {background-color:#f5f5f5;}   
  3. }  

    设备屏幕的输出宽度Device Width

在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />  

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的“max-device-width”所指的是设备的实际分辨率,也就是指可视面积分辨率。

    not关键词

 

CSS Code复制内容到剪贴板
  1. @media not print and (max-width1200px){样式代码}  

上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

    only关键词

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />  

HTML / CSS 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
You might like
PHP伪静态写法附代码
2008/06/20 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
授权委托书
2014/09/17 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
英语辞职信范文
2015/02/28 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
如何Tomcat中使用ipv6地址
2022/05/06 Servers