详解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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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出错界面
2006/10/09 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Node.js搭建小程序后台服务
2018/01/03 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
军训心得体会
2013/12/31 职场文书
科研先进个人典型材料
2014/01/31 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
诚实守信演讲稿
2014/09/01 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
安全第一课观后感
2015/06/18 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书