css - 响应式 CSS 改进问题

Question

我开始用 css 写一个移动版本，我问你哪种方法更好:

1. 在 html 中编写一个 div 类 desktop 和另一个 div 类 mobile。从零开始构建一切。例如:

<div class="container-fluid bg-1 desktop1">
	<div class="container">
		<div class="col-xs-5 despre-noi-text first-section">
			<h2>asdfsdfdf</h2>
	  		<p class="despre-paragraph">
           adsdadd
            </p>
  		</div>
  		<div class="col-xs-7 despre-noi-img second-section"></div>
	</div>
	
</div>
<div class="container-fluid mobile1">
	<div class="container">
		<div class ="row mobile-row">
			<div class="col-xs-12 mobile1-img"></div>
		</div>
		<div class ="row mobile-row">
			<div class="col-xs-12 mobile1-text">
				<h2>asdfsdffdfsfsdf</h2>
		  		<p class="mobile1-despre-paragraph">
	           		 asdfdfdfd 
	            </p>
	            <p class="mobile1-despre-paragraph2">saddfsdfsdfsdfd</p>
	  		</div>
  		</div>
	</div>
</div>

之后，我将检查移动分辨率上的媒体查询，哪些类将被隐藏，哪些类将不被隐藏。

@media only screen and (max-width : 480px) {

	.desktop1 	{ display:none; }
	.mobile1 	{ display:block; } 
 }

或者覆盖媒体查询中的所有类？

Answer 1

绝对使用媒体查询来覆盖默认属性。保持代码干燥和易于维护通常是一个很好的原则。拥有一个 HTML block 的两个版本意味着不必要的重复(意味着需要将更多代码加载到浏览器)以及 future 维护中的更多工作。

使用查询来覆盖样式不是性能问题——CSS 是为级联而构建的。不要因为利用它而感到难过(除非您无缘无故地级联并添加不必要的规范)。

简短回答:减轻压力。不要复制 HTML。