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

要将Unsemantic与Adapt.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 回答