Question

在我的项目中，我使用Semantic UI作为组件库（也使用ng2-semantic-ui，因为它是Angular app）。我希望我的应用程序能够响应。实现这一目标的一种方法是在没有任何CSS框架的项目中使用：

html {
    font-size: 62.5%; // This makes 1rem equal to 10px by default, using only rems - easy to code that way 
}
// just a SASS mixin
@include respond(tablet-landscape) { 
    font-size: 56.25%; // on smaller screens I make font size smaller, everything works great
}

@include respond(tablet-portrait) { 
    font-size: 50%; //1 rem = 8px
}

现在我想在语义UI驱动的项目中使用此方法，但是存在问题。当我使用它时，用户界面元素变得越来越小，所以我的下一步是调整默认的语义主题以使用更大的相对值。我想这样我会得到我的1rem == 10px的东西，语义元素将具有正常的大小，并将响应我的响应混合。

/*-------------------                                                                                                                                                                                                                                                           
  Base Sizes                                                                                                                                                                                                                                                                
--------------------*/                                                                                                                                                                                                                                                          


/* This is the single variable that controls them all */                                                                                                                                                                                                                        

@emSize   : 14px;                                                                                                                                                                                                                                                               


/* The size of page text  */                                                                                                                                                                                                                                                    
@fontSize : 14px;

基本设置似乎很简单。但尽管经过多次尝试，我无法实现这一行为。有人可以帮忙吗？或许这根本不可能？

Answer 1

如果我理解您的问题是正确的，则在semantic.css中，handleClick = () => this.myRef.classList.add('click-state')元素的handleClick = event => event.target.classList.add('click-state'); render() { return <div className="base-state" onClick={this.handleClick}>click here</div>; }明确设置如下。

font-size

为了达到您的要求，您可以通过在semantic.css之后加载它或使用html在您的CSS中覆盖它。希望这有帮助，请告诉我。

具有语义UI和1rem == 10px技巧的响应式网页

1 个答案: