响应式CSS改进问题

Question

我开始在css中编写移动版本，我问你哪种方式更好：

1. 在html中写一个div，其中有一个桌面类，另一个div有一个移动类。从零开始构建。例如：

<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块的两个版本意味着不必要的重复（意味着需要将更多代码加载到浏览器中）以及将来维护中的更多工作。

使用查询覆盖样式不是性能问题 - CSS是为了级联而构建的。不要害怕利用它（除非你没有什么理由进行级联并添加不必要的规范）。

简短的回答：为自己节省压力。不要复制HTML。