Question

我在添加任何内容之前尝试设置网站的常规结构，而媒体查询并未按照我的预期运作。

使用Sass我有以下

html
  width: 100%
  height: 100%

body
  height: 100%
  width: 100%

header
  height: 9%
  background-color: green

#dashboard
  padding: 0 4% 0 8%
  #angular-body
    height: 91%
    .ng-scope
      height: 100%
      .bootstrap-column-padding-fix-wrapper
        padding-right: 15px
        padding-left: 15px
        #body-column-wrapper
          height: 100%
          #left-column
            height: 100%
            background-color: yellow
          #middle-column
            background-color: blue
            height: 75%
          #right-column
            background-color: red
            height: 25%

@media (min-width: 692px)
  #dashboard
    padding: 0 4% 0 8%
    #angular-body
      .ng-scope
        .bootstrap-column-padding-fix-wrapper
          #body-column-wrapper
            #middle-column
              height: 100%
            #right-column
              height: 100%

我的HTML如下

.bootstrap-column-padding-fix-wrapper
  .row#body-column-wrapper
    .col-lg-2.col-md-1.hidden-sm.hidden-xs#left-column
    .col-lg-6.col-md-7.col-sm-8#middle-column
    .col-lg-4.col-md-4.col-sm-4#right-column

我预计在0到692像素之间，中间列的高度为75％，右列的高度为25％（在其父级内）。相反，在624px和691px之间它们都是100％但623px及以下它们是预期的（分别为25％和75％像素）。

我很少寻找＆＃34;这里是正确的代码＆＃34;而且更多的是寻找一个＆＃34;这就是你所做的不是以你想要的方式行事的原因＆＃34;。我一直在阅读引导程序文档但尚未看到可以解释这一点的内容。

编辑：包括一般布局

%html{ 'ng-app' => 'ekoApp' }
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
    %meta{content: "", name: "description"}/
    %meta{content: "width=device-width", name: "viewport"}/
    %base(href="/")
    = stylesheet_link_tag "application"
    = csrf_meta_tag
  %body#dashboard(ng-controller='baseCtrl')
    %header.clearfix
    %div#angular-body
      = yield

@media查询行为奇怪

0 个答案: