unsemantic響應列 - 將無法在平板電腦

我使用unsemantic網格佈局，但是，與下面的代碼我預計體 div來調整到100％，當分辨率位於平板的範圍內調整：unsemantic響應列 - 將無法在平板電腦

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

我真的不明白爲什麼它不工作！

來源

2013-07-01 Daniel Galletta

對不起，是一個痛苦和不回答你的問題，但爲什麼不只是包括移動和臺式機CSS放到一個文件中，並利用@media函數來應用它們。這樣可以避免在另一個JS文件中加載並運行腳本，這些腳本不僅彌補了文件大小的小幅增加。 – justinavery

看來你必須通過調用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-01 07:27:29 spitd1

要使用平板電腦的斷點與Adapt.js爲您的使用情況使用Unsemantic：

加載只有基本CSS開始。
如果JavaScript被禁用或不可用，請使用平板電腦斷點加載響應式CSS。
在您的HTML文檔的頭部配置並加載Adept.js。
如果您只想使用桌面默認（網格-80）的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-03 04:25:06 duckah

unsemantic響應列 - 將無法在平板電腦

回答

相關問題