响应CSS改善问题

我开始写在CSS的移动版本，我问你这是更好的办法：响应CSS改善问题

在HTML写div其中有一类桌面和另一div其中有一类移动。并从零开始构建。例如：

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

此后，我将与媒体查询的移动解决哪些类将被隐藏，并且将不会隐藏检查。

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

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

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

来源

2015-02-12 Jozsef Naghi

或者可能使用'hidden-xs'类（<768px）？ – dfsq 2015-02-12 08:44:11

我会去重写类。这将有助于减少重复信息的HTML代码。然后在mediaquerie中检查宽度并覆盖它全部，imo。例如，如果我有菜单，我会选择第一个选项。 – Cheshire 2015-02-12 08:55:02

ideea是桌面设计，与手机版本不一样。当然，颜色和文字是一样的。如果我选择覆盖clasess，我必须写很多绝对的css位置并禁用大量的float。这是明智的吗？这将是一个完全的CSS乱码 – 2015-02-12 09:00:28

绝对使用媒体查询来覆盖默认属性。保持代码干爽和易于维护通常是一个很好的原则。有两个版本的HTML块意味着不必要的重复（意味着需要将更多的代码加载到浏览器中），并且在将来的维护中需要更多的代码。

使用查询来覆盖样式不是性能问题 - CSS是为级联构建的。不要因为利用它而感到不快（除非你没有什么理由加入不必要的规范）。

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

来源

2015-10-16 13:32:04

响应CSS改善问题

回答

相关问题