Question

我想在我的标题下划一条4种不同的颜色。

对于桌面我希望它与我的响应式网格一起使用：对于移动设备，我希望它全宽：

<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>

所以我的网格现在在我的网格系统之外，并且适用于我的移动设计，而不是我想要它们用于桌面的方式。当我将这些行放在.row中的.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和绿线都是一样的，但有自己的颜色变量）

是否有一个干净的方法（仅使用css和html）？谢谢！

Answer 1

您是否考虑过使用多站线性渐变？ browser support非常出色，这种方法可以将import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import {createStore, applyMiddleware} from 'redux'; import thunk from 'redux-thunk'; import Reducer from './Reducer/'; import {Router, Route, browserHistory} from 'react-router'; import App from './Components/App.jsx'; const store = createStore(Reducer, applyMiddleware(thunk)); ReactDOM.render( <Router history={browserHistory}> <Route path='/user' component={App}/> </Router> ,document.getElementById('root'));简化为单个元素。

＆＃13;

HTML

＆＃13;

: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%
    );    
  }  
}

＆＃13;

https://jsfiddle.net/dx9gyn2s/

清理CSS：在gridsystem for mobile中使用gridsystem中的div

1 个答案: