Question

首先，在CSS方面我是黑客。尽可能多地阅读和练习以获得更好的成绩。目前，我正在尝试在一行中添加一组媒体查询来控制移动设备的填充，边距和字体大小，以便我的文本正好位于我想要的位置。我的问题是如何为行创建一个类，因此这些样式仅适用于此行内容。在这种情况下，它是我网站上第一个（英雄）行，在图像上有html文本。以下是我正在尝试编写，给予或进行一些微调调整。如何创建单个类来控制h2和h3类的样式？

@media only screen and (max-width: 481px) {
#wrapper .hero h2 {
    font-size: 36px!important;
  }
}

@media only screen and (max-width: 481px) {
#wrapper .hero h3 {
    font-size: 22px!important;
  }
}

我感谢社区可以分享的任何指导或支持！

Answer 1

@media only screen and (max-width: 481px) {
#wrapper .hero h2 {
    font-size: 36px!important;
  }
#wrapper .hero h3 {
    font-size: 22px!important;
  }
}

另外，您可以使用less或SASS预处理器来控制单个类中的多个属性

Answer 2

从CSS中可以清楚地看到，您希望将不同的字体大小应用于同一视口中的不同子元素。在这种情况下，不可能为同一属性定义两个值，即font-size，并期望浏览器将两者用于不同的元素。但是，您只需要定义一次媒体查询：

import { NavigationActions } from 'react-navigation';

handleOnPressButton = () => {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: "CreateMessage" })
    ]
  });
  this.props.navigation.dispatch(resetAction);
}

如何在Hero Row上的CSS中定位多个类

2 个答案: