·您当前的位置:主页 > 技术教程 > Html5技术 >

[css3]css3媒体查询@media在响应式web设计中的应用

时间:2019-02-12 19:06阿酷
[css3]css3媒体查询@media在响应式web设计中的应用

调用方式1:

<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">

  1. 注:media="screen and (min-width: 768px)" 
  2.  
  3. ---screen-------------------------------- 
  4. 引用 screen (缺省值),提交到计算机屏幕; 
  5. print, 输出到打印机; 
  6. projection,提交到投影机; 
  7. aural,扬声器; 
  8. braille,提交到凸字触觉感知设备; 
  9. tty,电传打字机 (使用固定的字体); 
  10. tv,电视机; 
  11. all,所有输出设备 
  12.  
  13. ---min-width: 768px--------------------- 
  14. min-width 屏幕最小宽度 

调用方式2:

  1. <style> 
  2.  // 阿酷TONy 
  3.    @media screen and (min-width: 768px) { 
  4.    .class { background: blue; line-height:50px; } 
  5.    } 
  6.    </style> 

 

热门文章推荐

请稍候...