大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > 使用媒体查询实现响应式设计

使用媒体查询实现响应式设计

关键词:响应式设计媒体查询  阅读(606) 赞(18)

[摘要]本文是对响应式设计-媒体查询的讲解,对学习CSS编程技术有所帮助,与大家分享。

媒体查询

媒体查询只支持IE9+、chrome、ff等浏览器,IE8以下的浏览器可以下载引用respond.js,

写法:

<!--[if lt IE 9]>
    <script src="respond.js"></script>
<![endif]-->

媒体查询能检测哪些属性 :
1.width 视口宽度
2.height 视口高度
3.device-width 渲染表面的宽度(对我们来说就是设备屏幕的宽度)
4.device-height 渲染表面的高度(对我们来说就是设备屏幕的高度)
5.orientation 检查设备处于横向还是纵向
6.aspect-ration 基于视口宽度和高度的宽高比
一个16:9比例的显示屏可以这样定义:aspect-ration:16/9;
7.device-aspect-ration 基于设备渲染平面的宽高比
8.color 每种颜色的位数 例如 min-color:16 会检查设备是否拥有16位颜色
9.color-index 设备颜色索引表中的颜色数。值必须是非负整数
10.monochrome 检查单色帧缓冲区中每像素所使用的位数 , 值必须是非负整数
11.resolution 用来检测屏幕或打印机的分辨率,例如:min-resolution:300dpi,
还可以接受每厘米像素点数的度量值,例如,min-resolution:118dpcm;
12.scan 电视机的扫描方式
progressive 逐行扫描
interlace 隔行扫描
例如:720p HD电视(p表示逐行扫描)匹配 scan:progressive
1080i HD电视(i表示隔行扫描)匹配 scan:interlace
13.grid 用来检测输出设备是网络设备还是位图设备

1-11可以有min- 、max- 创建一个查询范围,而12-13没有

写法:

  1、link上面media属性判断,是否加载改css

  eg:<link rel="stylesheet" type="text/css" media="screen and orientation:portrait" href="css/sreen_style.css" />

  orientation:portrait 意思是显示屏是纵放的,yes,加载改css
  not 在媒体查询的开头加上会颠倒改查询的逻辑
  and 是并||
  , 或
  2、css文件外链css文件

     @import url("phone.css") screen and (max-width:360px); /*当显示屏最大宽度小于360px时加载 */
  3、直接书写:

    @media screen and (max-width:980px) {
      body{
      background:#f0f;
       font-size:12px;
      }
     }



相关评论