CSS3 Media Queries

2019-09-11 郑州网站建设  

一、Media Queries 支持的属性 属性 值 Min/Max 描述color integer yes 每种颜色的字节数color-index integer yes 颜色表中的颜色数device-aspect-ratio integer/integer yes 宽高比例device-height length yes 设备屏幕的输出高度device-width length yes 设备屏幕的输出宽度grid integer no 是否是基于格栅的设备height length yes 渲染界面的高度monochrome integer yes 单色帧缓冲器中每像素字节resolution resolution yes 分辨率scan no tv媒体类型的扫描方式width length yes 渲染界面的宽度orientation Portrait/landscape no 横屏或竖屏   height min-height max-heightdevice-width min-device-width max-device-widthdevice-height min-device-height max-device-heightaspect-ratio min-aspect-ratio max-aspect-ratiodevice-aspect-ratio min-device-aspect-ratio max-device-aspect-ratiocolor min-color max-colorcolor-index min-color-index max-color-indexMonochrome min-monochrome max-monochromeResolution min-resolution max-resolution 二、关键词

and - 结合多个媒体查询not - 排除某种制定的媒体类型only - 用来定某种特定的媒体类型

三、引用样式示例 <link rel="stylesheet" media="all" href=http://www.divcss5.com/css3-style/"style.css" /><link rel="stylesheet" media="screen and (min-width:980px)" href=http://www.divcss5.com/css3-style/"desktop.css" /><link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href=http://www.divcss5.com/css3-style/"pad.css" /><link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href=http://www.divcss5.com/css3-style/"phone.css" /><link rel="stylesheet" media="screen and (max-width:320px)" href=http://www.divcss5.com/css3-style/"small.css" /> 四、内联样式示例 @media screen and (min-width: 980px) { //css code}@screen and (min-width:768px) and (max-width:980px) { //css code}@screen and (min-width:480) and (max-width: 768px) { //css code}@screen and (max-width:320px) { //css code}@media screen and (max-device-width: 480px) { //max-device-width等于480px}@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { //设备宽高比}@media all and (orientation:portrait) { //竖屏}@media all and (orientation:landscape) { //横屏} 五、jQuery Media Queries Plugin for ie6/7/8

六、Demo

本博客缩放即可看到效果


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1983.html转载请标明出处,谢谢合作!
标签:
  • 支持
  • CSS3
  • Media
  • Queries