如何在垂直网站中对div部分进行响应

Question

我正在创建一个包含多个不同部分的垂直网站。 我想让每个部分都对它所拥有的内容做出响应，但现在似乎没有响应。导航栏下面第一行的那两个文本应该在两个不同的行中，因为它写成：

<div id="firstRow">
    <a id="about" class="smooth"></a>
        <div class="intro">
            <div>Welcome to my website</div>
            <div>Scroll down to know more about us</div>
        </div>

</div> 

我尝试使用flex来使第一个div响应

div#firstRow {
    padding: 100px;
    display: flex;
}

我该如何做到这一点？

Answer 1

我认为您应该将display: flex属性添加到.intro div中，并添加row的弹性方向以将其放在同一行：

.intro {
  display: flex;
  flex-direction: row;
}

jsFiddle上的示例。

Answer 2

做这样的事情

float PPI = (float)Math.sqrt((double)(screenWidthPx*screenWidthPx + screenHeightPx*screenHeightPx))/LCD_Diagonal;