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

タブレット ブレークポイントを使用するユースケースでAdapt.jsでUnsemanticを使用するには:

  • 最初にベース CSS のみを読み込みます。
  • JavaScript が無効または利用できない場合は、レスポンシブ CSS をタブレット ブレークポイントで読み込みます。
  • HTML ドキュメントのヘッドに Adept.js を構成してロードします。
  • デスクトップのデフォルト (grid-80) の 80% 幅のみを利用したい場合は、レイアウトを中央に保つために prefix-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 に答える