@media與鐳的查詢作出反應

Question

我試圖在使用鐳庫反應的線樣式中實現。我相信除媒體查詢外，一切都很好。我也使用彈性盒，我希望當屏幕尺寸爲橫向時按鈕顯示爲行，而當屏幕爲縱向時，按一列顯示。

import React from 'react'; 
import {Grid, Row, Col} from 'react-flexbox-grid/lib'; 
import Radium from 'radium'; 

import NavBar from "../components/NavBar"; 
import ButtonNav from "../components/ButtonNav"; 
import Footer from "../components/Footer"; 

@Radium 
export default class Home extends React.Component { 


    render() { 

    var mainNav = { 
    main: { 
     fontSize: '12px', 
     background: '#eee', 
    }, 

     ul: { 
     margin: '0', 
     padding: '0', 
     display: 'flex', 
     flexWrap: 'wrap', 
     justifyContent: 'space-around', 
     listStyle: 'none', 
     }, 

     li: { 
     borderStyle: 'solid', 
     borderRadius: '4px', 
     borderWidth: '1px', 
     margin: '50px', 
     }, 

     a: { 
     padding: '1.25rem 0.5rem', 
     fontSize: '1.6rem', 
     maxWidth: '140px', 
     fontWeight: 'bold', 
     textDecoration: 'none', 
     display: 'flex', 
     alignItems: 'flex-start', 
     color: '#333', 
     }, 

    '@media screen and (orientation: landscape)': { 
     ul: { 
     flexDirection: 'row', 
     }, 

     li: { 
     width: '35%', 
     textAlign: 'center', 
     paddingBottom: '500px', 
     }, 

     a: { 
     fontSize: 'rem', 
     }, 
    }, 

    '@media screen and (orientation: portrait)': { 
     ul: { 
     flexDirection: 'column', 
     }, 
    } 
    }; 



    return (
     <div> 
     <nav role='navigation' style={mainNav.main}> 
      <ul style={mainNav.ul}> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Home 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        About 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Clients 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Contact 
       </div> 
       </a> 
      </li> 
      </ul> 
     </nav> 
     </div> 
    ) 
    } 
} 

這個問題很少有文檔。我想知道它可能是一個問題，李，一個關鍵詞。

Answer 1

媒體查詢以及僞類等其他特殊事物（':hover'）是您打算創建樣式的對象的對象屬性。因此，舉例來說，如果你想媒體查詢添加到您的li樣式對象，你會不會有添加：

var mainNav = { 
    li: { 
    borderStyle: 'solid', 
    borderRadius: '4px', 
    borderWidth: '1px', 
    margin: '50px', 

    '@media screen and (orientation: landscape)': { 
     width: '35%', 
     textAlign: 'center', 
     paddingBottom: '500px', 
    } 
    }, 
} 

是的，它可能比一個CSS文件的詳細重複了一點，但是這是你怎麼做它。

https://github.com/FormidableLabs/radium/tree/master/docs/api#sample-style-object