Не семантические отзывчивые столбцы - не будут изменять размер на планшете

Question

Я использую несемантическую разметку сетки, однако, с помощью следующего кода я ожидаю, что размер тела 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>

Я действительно не понимаю, почему это не работает!

Answer 1

Кажется, вам нужно вызывать unsemantic-grid-tablet.css через адаптацию, а не вызывать unsemantic-grid-responseive-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>

Answer 2

Чтобы использовать Unsemantic с Adapt.js для вашего варианта использования с точками останова планшета:

• Загрузите только базовый CSS изначально.
• Если JavaScript отключен или недоступен, загрузите адаптивный CSS с точками останова планшета.
• Сконфигурируйте и загрузите Adept.js в заголовок вашего HTML-документа.
• Если вы хотите использовать только 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>