미디어 쿼리 전환 문제

내 웹 사이트에 3 개의 다른 미디어 쿼리가 있고 브라우저 창을 줄여 하나에서 다른 것으로 전달할 때 전환이 유동적이지 않습니다. 이 페이지는 잠시 동안 레이아웃을 변경 한 다음 다음 미디어 쿼리를 계속 진행합니다. 나는 그 문제를 파악할 수 없으며 모든 스켈레톤을 부드럽게 사용해야한다.미디어 쿼리 전환 문제

이것은 웹 사이트이므로 페이지를 축소하지 마십시오. 태블릿이나 모바일 레이아웃을 통과하기 전에 이상하게 작동합니다. http://www.andrearizzotto.com

출처

2016-06-11 Andrea Rizzotto

는 993px-801px에 media queries 범위를 변경

및 800px-480px

출처

2016-06-11 11:51:14 a1626

당신이 짝짓기 감사, 아무것도 힘든, 여전히 같은 문제 –

당신이 어떤 브라우저를 사용하고 변경되지 않습니다? – a1626

나는 코드가 없기 때문에 크롬의 개발 도구에서 이러한 변경을 수행했으며 나에게 도움이되었다. 시도하고 쿼리 값을 조정하고 문제를 해결해야합니다. 내가 알게 된 것은 페이지가 질문에 언급 된 것처럼 잠깐 동안의 레이아웃을 변경하지 않았지만, 2 개의 특정 너비로, 그 다음에 미디어 쿼리에 포함되어서 문제가 해결되었다는 것입니다. – a1626

열은 유체 레이아웃이 제대로 작동하려면 컬럼의 총 수와 개별 행으로 구성 될 예정된다.

스타일 시트에는 총 16 개의 열이 있습니다. 즉, 각 행은 원하는대로 동작하기 위해 열이 16 이하 여야합니다.

예

이 :

<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

답변

관련 문제