Question

将页面转换为响应式布局时，css样式会在620px断点后重置。受影响的设计部分如下。请注意以下代码段完美运行，仅用于描述我正在做的事情。只有在与完整代码结合使用时才会出现此问题。

＆＃13;

.tfulltiny{
	float: left;
	width: 100%;
	padding: 20px 0 20px 0;
}
.tblocktiny{
	float: left;
	text-align: left;
	margin-top: 10px;
}
.tcelltiny{
	float: left;
	text-align: left;
	color: #609;
	font-weight: bold;
}

@media only screen and (min-width: 680px) {
	body {
        margin:0 40px 0 40px;
    }
    .tblocktiny{
	    width: 16%;
	}
	.tcelltiny {
	    width:100%;
	}
}
@media only screen and (max-width: 680px) {
	.tblocktiny{
	    width: 99%;
	}
	.tcelltiny {
	    width:100%;
	}
}

＆＃13;

    <div class="tfulltiny">
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Planet</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Longitude (Deg:Min:Sec)</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Rasi</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Longitude (Deg:Min:Sec)</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Star</span>
			</div>
		</div>
		<div class="tblocktiny">
			<div class="tcelltiny">
				<span>Pada</span>
			</div>
		</div>
</div>

＆＃13;

680px屏幕后的预期输出：

但突然间风格在穿越620px +

时消失了

完整的代码是如此之大，所以我不能在这里包含它，可能是该代码中的错误。但是我想知道造型消失的原因。有哪些可能的问题以及如何解决这个问题？

编辑：搜索后，我发现620px宽度在代码中使用了2次。不知道它在这个错误中有一些作用。

＆＃13;

@media only screen and (min-width: 620px) {
      .tblocksml{
            width: 49%;
      }
      .tcellsml {
            width:99%;
      }
}
@media only screen and (max-width: 620px) {
      .tblocksml{
            width: 99%;
      }
      .tcellsml {
            width:99%;
      }
}

＆＃13;

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/118/

<强> CSS

     @media only screen and (max-width: 680px) {
        .tblocktiny{
           width: 99%;
           margin-top: 0;
        }
          .tcelltiny {
            width:100%;
            color: black;
            font-weight: normal;

          }
      }

其他解决方案https://jsfiddle.net/2Lzo9vfc/119/

    @media only screen and (min-width: 680px) {
      body {
        margin:0 40px 0 40px;
      }

      .tblocktiny{
        width: 16%;
         margin-top: 10px;
      }
      .tcelltiny {
         width:100%;
         color: #609;
         font-weight: bold;
      }
  }

Answer 2

终于找到了解决这个问题的方法。实际上这只是一个技巧，而不是一个合适的解决方案。由于@media重叠而发生的问题。因此，面临问题的部分必须首先添加到代码中。也就是说，将行为不当的代码剪切粘贴到css顶部，问题就解决了。 但是我知道这不是一个合适的方法，但它适用于我。我会在更好的答案到来时将答案改为最佳答案。

防止特定断点后重置样式

2 个答案: