朝湓教育网
您的当前位置:首页响应式设计-媒体查询_html/css

响应式设计-媒体查询_html/css

来源:朝湓教育网


媒体查询

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

写法:


    输出设备是网络设备还是位图设备

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

写法:

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

  eg:

  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;
      }
     }

显示全文