0

我正在使用无语义的网格布局,但是,使用以下代码,当分辨率位于平板电脑范围内时,我希望body div 的大小调整为 100%:

<div class="grid-parent tablet-grid-100 grid-80" id="body">
    <div class="grid-100" id="search-result">
        search return
    </div>  
    <div class="grid-50" id="column-left">Column left</div>
    <div class="grid-50" id="column-right">Column right</div>
</div>

但是,它会一直保持在 80%,直到达到移动设备大小(默认为 100%)。我已包含以下 css 文件:

<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css" />
    <noscript>
        <link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
    </noscript>
    <script>
      var ADAPT_CONFIG = {
        path: './assets/stylesheets/',
        dynamic: true,
        range: [
          '0 to 767px = unsemantic-grid-mobile.css',
          '767px = unsemantic-grid-desktop.css'
        ]
      };
    </script>
    <script src="./assets/javascripts/adapt.min.js"></script>

我真的不明白为什么它不起作用!

4

2 回答 2

0

要将UnsemanticAdapt.js 一起用于带有平板电脑断点的用例:

  • 最初仅加载基本 CSS。
  • 如果 JavaScript 被禁用或不可用,则使用平板电脑断点加载响应式 CSS。
  • 在 HTML 文档的头部配置和加载 Adept.js。
  • 如果您只想将 80% 的宽度用于桌面默认值 (grid-80),那么您可能还想利用前缀 10 来保持布局居中。

我能够成功测试以下内容:

<link rel="stylesheet" href="./assets/stylesheets/demo.css">
<link rel="stylesheet" href="./assets/stylesheets/dan.css">
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css">
<noscript>
    <link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css">
</noscript>
<script>
    var ADAPT_CONFIG = {
        path: './assets/stylesheets/',
        dynamic: true,
        range: [
            '0 to 767px = unsemantic-grid-mobile.css',
            '767px to 1025px = unsemantic-grid-tablet.css',
            '1025px = unsemantic-grid-desktop.css'
        ]
    };
</script>
<script src="./assets/javascripts/adapt.min.js"></script>

身体:

<div class="grid-parent grid-80 prefix-10 tablet-grid-100" id="body">
    <div class="grid-100" id="search-result">
        search return
    </div>  
    <div class="grid-50" id="column-left">column left</div>
    <div class="grid-50" id="column-right">column right</div>
</div>
于 2013-10-03T04:25:06.810 回答
0

看来你必须通过适应调用 unsemantic-grid-tablet.css,而不是通过链接调用 unsemantic-grid-responsive-tablet.css。试试这个代码:

<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
    <noscript>
        <link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
    </noscript>
    <script>
      var ADAPT_CONFIG = {
        path: './assets/stylesheets/',
        dynamic: true,
        range: [
          '0 to 767px = unsemantic-grid-mobile.css',
          '767px to 1025px = unsemantic-grid-tablet.css',
          '1025px = unsemantic-grid-desktop.css'
        ]
      };
    </script>
    <script src="./assets/javascripts/adapt.min.js"></script>
于 2013-08-01T07:27:29.393 回答