无语义的响应列 - 不会在平板电脑上调整大小答案

【问题标题】：unsemantic responsive columns - won't resize on tablet无语义的响应列 - 不会在平板电脑上调整大小
【发布时间】：2013-06-28 08:59:27
【问题描述】：

我正在使用 unsemantic 网格布局，但是，通过以下代码，我希望 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>

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

【问题讨论】：

很抱歉不回答您的问题，但为什么不将您的移动和桌面 CSS 包含在一个文件中并利用 @media 功能来应用它们。这避免了加载另一个 JS 文件并运行脚本，这足以弥补文件大小的小幅增加。

标签： css responsive-design unsemantic-css

【解决方案1】：

看来你必须通过适应调用 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>

【讨论】：

【解决方案2】：

将 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>

【讨论】：