返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
css基础当前位置:首页 > HTML教程 > css基础 > 正文

详解CSS3中@media的实际使用

发布时间:2016-08-24 11:36:26   来源:   点击:
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。
作为web前端开发人员需要知道并且会用这种知识。

css2的@media

css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。
语法: @media sMedia { sRules }
说明:
sMedia :  指定设备名称。请参阅附录:设备类型
sRules :  样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。
示例:
  1. // 设置显示器用字体尺寸 
  2. @media screen { 
  3. BODY {font-size:12pt; } 
  4. // 设置打印机用字体尺寸 
  5. @media print { 
  6. @import "print.css" 
  7. BODY {font-size:8pt;} 
css3的@media

@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
语法:@media : { sRules }
取值:
  1. <sMedia>:指定设备名称。 
  2. {sRules}:样式表定义。 
说明:
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).
  1. media_query: [only | not]?  [ and  ]* 
  2. expression: (  [: ]? ) 
  3. media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed 
  4. media_feature: width | min-width | max-width 
  5. | height | min-height | max-height 
  6. | device-width | min-device-width | max-device-width 
  7. | device-height | min-device-height | max-device-height 
  8. | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio 
  9. | color | min-color | max-color 
  10. | color-index | min-color-index | max-color-index 
  11. | monochrome | min-monochrome | max-monochrome 
  12. | resolution | min-resolution | max-resolution 
  13. | scan | grid 
解析
media_query:媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression:表达式。媒体特征的匹配与否。
media_type:媒体的种类。包括了很多。
media_feature:媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。

DEMO(推荐在Chrome或者FIREFOX下打开,打开后,按快捷键“CTRL”+”+”,“CTRL”+”-”来缩放页面):

CSS代码
  1. body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/ 
  2. @media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/ 
  3. @media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/ 
  4. @media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/ 
  5. @media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/ 
HTML代码
  1. <p>效果演示,请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下:</p> 
  2. <p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p> 
  3. <p>/*宽度小于500px时 绿色*/</p> 
  4. <p>/*宽度大于800px时 红色*/</p> 
  5. <p>/*高度小于100px时 黄色*/</p> 
  6. <p>/*高度大于400px时 粉色*/</p> 

补充:

常见写法:
  CSS Code复制内容到剪贴板
  @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
  background: #ccc;
  }
  }
  @media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸
  带all 跟 only的写法
  一般all跟only都是对应在一起出现的
  CSS Code复制内容到剪贴板
  @media all and (min-width:xxx) and (max-width:xxx){
  /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/
  }
  @media only screen and (min-width:xxx) and (max-width:xxx){
  /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/
  }
  device-aspect-ratio
  device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
  用法:
  CSS Code复制内容到剪贴板
  @media only screen and (device-aspect-ratio:4/3)


版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814