你如何在 choo.js 中使用 css 媒体查询？

【问题标题】：How do you use css media queries in choo.js?你如何在 choo.js 中使用 css 媒体查询？
【发布时间】：2018-09-27 10:10:34
【问题描述】：

如果有人想知道

你在你的项目中安装 sheetify

使用 npm

npm install sheetify

然后在你的 choo 组件中

const html = require('choo/html')
const css = require('sheetify')

const yourVariable = css`
  :host {
    color: red;
  }

@media screen and (min-width: 768px) {
    :host {
      color: blue;
    }
  }

`
const yourComponent = () => {
 return html`
         <h1 class=${yourVariable}>This text is styled</h1>
 `
}
module.exports = yourComponent

【问题讨论】：

问题在标题中，答案在内容中。是的。到目前为止，这是一个只有一个答案的问题；）

标签： javascript css media-queries

【解决方案1】：

你也可以将整个css导出为一个js模块并使用app.use('./path/to/module')

说您需要设置html 或body 标签的样式

示例：在app/assets/cssStyles.js

const css = require('sheetify')

module.exports = function () {
 return css`
     html, body {
        margin: 0;
        padding: 0;
  }
`
}

然后在你的根文件app/index.js

....
const styles = require('./assets/styles')

app.use(styles)
.....

【讨论】：