Вопросы, связанные с переходом на медиа-серверы

У меня есть 3 различных медиа-запроса на моем веб-сайте, и когда я перехожу от одного к другому, уменьшая окно браузера, переход не является текучим. Страница изменяет макет на несколько мгновений, а затем продолжает следующий медиа-запрос. Я не могу понять, что проблема, и я использую Скелет, так что все должно быть гладко.Вопросы, связанные с переходом на медиа-серверы

Это сайт, попробуйте не сжимать страницу, и вы увидите, что перед тем, как перейти к планшетному или мобильному макету, он действует странно. http://www.andrearizzotto.com

источник

2016-06-11 Andrea Rizzotto

Измените media queries диапазоны для 993px-801px и 800px-480px

источник

2016-06-11 11:51:14 a1626

благодарственное спариванию, ничего не меняется жестко, по-прежнему та же проблема –

, какой браузер вы используете? – a1626

Так как у меня не было никакого кода, я сделал эти изменения в dev tool of chrome, и это сработало для меня. Попробуйте настроить значения запросов, и это должно решить проблему. То, что я узнал, это то, что страница не меняет макет в течение нескольких мгновений, как указано в вопросе, но с двумя конкретными ширинами, которые затем включаются в «медиа-запросы», и это решило проблему для меня. – a1626

Колонки должны быть организованы в отдельных строках с общим числом столбцов для раскладка жидкости для правильной работы.

В таблице стилей имеется шестнадцать столбцов, что означает, что каждая строка должна иметь шестнадцать колоний или меньше, чтобы вести себя так, как мы хотим их.

Пример

это:

<div class="ten columns" id="head"> 
    <h1><a href="../index.html">ANDREA RIZZOTTO</a></h1> 
</div> 
<div class="six columns" id="head2"> 
    <h3><a href="CONTACT/contact.html">CONTACT</a></h3> 
    <h3><a href="ABOUT-ME/about-me.html">ABOUT ME</a></h3> 
    <h3><a href="index.html">WORK</a></h3> 
</div> 
<div class="eight columns" id="body"> 
    <a class="on2" href="the-green-room/the-green-room.html"><img class="imageborder" src="images/greenroom.jpg" alt=""></a> 
    <p class="text"><a class="on" href="the-green-room/the-green-room.html">The Green Room</a></p> 
</div> 

<div class="eight columns"> 
    <a class="on2" href="evanescent-catalog-design/evanescent-catalog-design.html"><img class="imageborder" src="images/evanescentcatalogdesign.jpg" alt=""></a> 
    <p class="text"><a class="on" href="evanescent-catalog-design/evanescent-catalog-design.html">Evanescent Catalog Design</a></p> 
</div> 

<div class="eight columns"> 
    <a class="on2" href="evanescent-identity/evanescent-identity.html"><img class="imageborder" src="images/evanescent-identity.jpg" alt=""></a> 
    <p class="text"><a class="on" href="evanescent-identity/evanescent-identity.html">Evanescent Identity</a></p> 
</div> 

<div class="eight columns"> 
    <a class="on2" href="moa-identity/moa-identity.html"><img class="imageborder" src="images/MOAidentity.jpg" alt=""></a> 
    <p class="text"><a class="on" href="moa-identity/moa-identity.html">Museum of Associations Identity</a></p> 
</div>

Должно выглядеть так:

<div class="row"> 
    <div class="ten columns" id="head"> 
    <h1><a href="../index.html">ANDREA RIZZOTTO</a></h1> 
    </div> 
    <div class="six columns" id="head2"> 
    <h3><a href="CONTACT/contact.html">CONTACT</a></h3> 
    <h3><a href="ABOUT-ME/about-me.html">ABOUT ME</a></h3> 
    <h3><a href="index.html">WORK</a></h3> 
    </div> 
</div> 
<div class="row"> 
    <div class="eight columns" id="body"> 
    <a class="on2" href="the-green-room/the-green-room.html"><img class="imageborder" src="images/greenroom.jpg" alt=""></a> 
    <p class="text"><a class="on" href="the-green-room/the-green-room.html">The Green Room</a></p> 
    </div> 
    <div class="eight columns"> 
    <a class="on2" href="evanescent-catalog-design/evanescent-catalog-design.html"><img class="imageborder" src="images/evanescentcatalogdesign.jpg" alt=""></a> 
    <p class="text"><a class="on" href="evanescent-catalog-design/evanescent-catalog-design.html">Evanescent Catalog Design</a></p> 
    </div> 
</div> 
<div class="row"> 
    <div class="eight columns"> 
    <a class="on2" href="evanescent-identity/evanescent-identity.html"><img class="imageborder" src="images/evanescent-identity.jpg" alt=""></a> 
    <p class="text"><a class="on" href="evanescent-identity/evanescent-identity.html">Evanescent Identity</a></p> 
    </div> 
    <div class="eight columns"> 
    <a class="on2" href="moa-identity/moa-identity.html"><img class="imageborder" src="images/MOAidentity.jpg" alt=""></a> 
    <p class="text"><a class="on" href="moa-identity/moa-identity.html">Museum of Associations Identity</a></p> 
    </div> 
</div>

источник

2016-06-22 13:44:15

Вопросы, связанные с переходом на медиа-серверы

ответ

Смежные вопросы