Question

我的网站上有3个不同的媒体查询，当我从一个传递到另一个时，通过缩小浏览器窗口，转换不流畅。页面会稍微更改布局，然后继续下一个媒体查询。我无法解决这个问题而且我正在使用Skeleton所以它应该都很顺利。

这是网站，尝试不缩小页面，你会看到在传递到平板电脑或移动布局之前它很奇怪。 http://www.andrearizzotto.com

Answer 1

将media queries范围更改为993px-801px和800px-480px

Answer 2

列应该按行分组，流体布局的总列数能够正常工作。

样式表中总共有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>

媒体查询过渡问题

2 个答案: