清洁CSS：使用gridsystem div的桌面，gridsystem之外的移动

问题描述：

我试图让我的标题是4种不同颜色下的一条线。清洁CSS：使用gridsystem div的桌面，gridsystem之外的移动

对于桌面我想它去与我的响应格：对于移动我想让它去的全宽：现在

<header> 
<div class="container"> 
    <div class=" row"> 
     <div class="col-3 center"> 
      <img src="assets/arteveldelogo.png"> 
     </div> 
     <div class="col-9 hidden-sm right"> 
      <h1 class="font-heavy"> 
       Beeldbank Mediatheek Mariakerke 
      </h1> 
      <ul class="font-heavy"> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Collecties </a></li> 
       <li><a href="#"> Tentoonstellingen </a></li> 
       <li><a href="#"> Klassen </a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
     <div class="line orangeline"></div> 
     <div class="line blueline"></div> 
     <div class="line magentaline"></div> 
     <div class="line greenline"></div> 
</header>

所以，我线AR我gridsystem外面，做工精细对于我的移动设计，只是不是我希望他们用于我的桌面的方式。当我将这些行放入.container中的.row时，它们将用于桌面设计，而不是用于移动设计。我的萨斯是

.line{ 
margin-top: 1rem; 
display:block; 
float:left; 
width: 25%; 
} 
.orangeline{ 
border-bottom: 1px solid $orange; 
@media only screen and (min-width:45em){ 
    border-bottom: 4px solid $orange; 
}

（蓝线，magentaline & GREENLINE都是相同的，但有自己的colorvariable）

有没有干净的方式做的（只使用CSS和HTML）？谢谢！

1.使用引导2.创建四个相等的列3.设置高列被周围'50px'。 4将每列设置为不同的颜色。 – ZombieChowder

嘿谢谢你的回复。这就是我为我的桌面版所做的。只有4列在宽度为80％的容器中（认为bootstrap-container也可以这样工作，我错了吗？），对于移动设备我希望它们是100％，所以将它们放在容器外。但要做出2个版本（一个“在-container'版本这是在桌面上和可见”出container'版本这是在移动设备上可见）在我的HTML似乎只是方式TOT脏。 – Annelien

你可以创建一个小提琴吗？ – Aslam

答

你有没有使用多站，线性渐变考虑？ browser support非常好，这种方法简化了您的HTML到一个单一的元素。

:root { 
 
    --orange: #EE9900; 
 
    --blue: #00AACC; 
 
    --magenta: #CC0077; 
 
    --green: #BBCC00; 
 
} 
 

 
.line { 
 
    height: 3px; 
 
    background: linear-gradient(
 
    to right, 
 
    var(--orange) 25%, var(--blue) 25%, 
 
    var(--blue) 50%, var(--magenta) 50%, 
 
    var(--magenta) 75%, var(--green) 75% 
 
); 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    .line { 
 
    height: 1px;  
 
    } 
 
} 
 

 
/* No support for CSS variables? Fallback time */ 
 
@supports not(--test: green) { 
 
    .line { 
 
    background: linear-gradient(
 
     to right, 
 
     #EE9900 25%, #00AACC 25%, 
 
     #00AACC 50%, #CC0077 50%, 
 
     #CC0077 75%, #BBCC00 75% 
 
    );  
 
    } 
 
}

<div class="line" role="presentation">

https://jsfiddle.net/dx9gyn2s/

清洁CSS：使用gridsystem div的桌面，gridsystem之外的移动

相关推荐