今天在做电控系统web布局的时候踩了一坑，虽说frameset已经很少人用，但是我们不可否认frameset曾经的辉煌时刻，现在依然有好多的后台系统布局有它的身影，包括接下来我的那个项目也是一样的，随指一码，不喜勿喷！下面就进入填坑之旅吧！

首页整个页面采用frameset框架式上左右结构布局，下图所示的就是页面中的某个iframe页面，当我拖动浏览器窗口宽度大小在1440px左右时布局发生错乱，那就针对屏幕文档显示宽度大小在1440px左右做媒体查询设置吧，于是默默地把查询条件设置为max-width:1440px，可事实不并不如人所料，在没有到1440px（目测差异一大截）的地方就做了样式变更，这也是frameset布局对媒体查询的影响，其实媒体查询精度并没有改变，只是媒体查询的对象不同的影响。

布局图片

  1. 媒体查询的定义

这里只说说两种我们常见的也是用得最多的定义，像一些不常用的比如：彩色原件数、屏幕宽高比等请自行搜索。

一：使用@media查询，你可以针对不同的媒体类型定义不同的样式。指的是不同的媒介（平板、阅读器、打印机等）。
二：使用@media查询，你可以根据输出设备中的页面可见区域高度的不同来设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。由此可见，这类功能的基准对象是需要调整样式的文档在屏幕设备（浏览器）中的显示宽高度。

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <div class="container">
    <div class="content">
      <h2 class="user_tit">日程管理</h2>
      <hr />
      <div class="iframe_box">
        <frameset>
          <iframe src="frame_top.html" width="90%" height="185"></iframe>
          <iframe src="frame_left.html" width="75%" height="530"></iframe>
          <iframe src="frame_right.html" width="75%" height="530"></iframe>
        </frameset>
      </div>	
    </div>	
  </div>
</body>

css代码

1
2
3
4
5
6
7
8
9
@media screen and (max-width:1440px){
  .timer{
    margin-left: 3%;
  }
  .status,.special,.modify{
    margin-left: 40px;
  }

}

其实也没有啥，就是改变三个div的左右间距。
当然，上面的代码还没到1440就起作用了，有图有真相。

出错图片

**分析原因：其实上面说的差不多了，当我们需要改变这个框架里面某个独立文档的样式时，我们的查询基准是该文档在输出设备屏幕上的显示宽度高度，下面的js可以实时打印窗口改变的大小，而此时我们所查询的基准是整个输出屏幕文档显示的大小，当然这个准确度就不是差之毫厘了，此时我们可以用尺子量一量我们需要改变样式的文档在整个框架布局中显示的大小，以此为基准就正常的媒体查询自适应了。

js获取文档宽高

1
2
3
4
5
window.onresize = function(){
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  console.log(w+"|"+h);
}

**总结几种媒体查询失效的原因：① 视口viewport没有声明； ②代码（and后的空格）查询条件的混淆具体数值别的单位； ③上面填坑。