html - 如何保留 VH 布局的部分？

Question

我正在尝试实现以下布局(图 1)，其想法是根据屏幕(台式机和笔记本电脑屏幕)保持相同的结构和比例

但是，在我当前的代码中，它在台式机上看起来不错，但我不知道在不更改布局的情况下保留笔记本电脑屏幕中元素和文本的命题。基本上元素(文本)的内容超出了框(溢出)。我正在使用 100VH、flexboxes 和 clac ()，但我运气不好 - 我应该改用 Grid 吗？

有谁知道我该如何设计这种布局并根据用户屏幕(笔记本电脑 - 台式机)保持内容(框和文本)的可缩放性

//Basic styling
html {
  font-family: $font-main;
  font-size: $fs-base;
  line-height: $lh-normal;
  font-weight: $fw-normal;
}

body {
  font-family: $font-main;
  line-height: $lh-normal;
  font-weight: $fw-normal;
  width: 100%;
  min-width: $vp-min-width;
  min-height: 100%;
  color: $c-black;
  background-color: $c-white;
}

html,
body,
div,
header,
footer,
section {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;
}

.footer-container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, #004c54 0%, #0097a7 100%);
  padding: calc(4rem + 0.5vw) calc(4rem + 0.5vw);
  color: #fff;
  overflow: hidden;
}

.f-find-us {
  width: 295px;
  & p {
    font-size: 1.250em;
    margin-bottom: 1.2em
  }
}

.f-find-us-map {
  background: green;
}

//Headings
h1 {
  font-size: $fs-xlarge;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h2 {
  font-size: $fs-large;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h3 {
  font-size: $fs-large;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0;
}

h4 {
  font-size: $fs-normal;
  font-weight: $fw-semibold;
  line-height: initial;
  margin: 0;
}

h5 {
  font-size: $fs-xlarge;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0 0 1.2em 0;
}

h6 {
  font-size: $fs-medium;
  font-weight: $fw-semibold;
  margin: 0;
  line-height: initial;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

<div class="footer-wrapper">
  <div class="footer-container">

    <div class="row">
      <div class="col f-find-us">

        <h5>How to find us</h5>

        <h6>UK</h6>

        <p>Content HERE</p>

        <h6>Singapore</h6>

        <p>Content HERE</p>

        <h6>Canada</h6>

        <p>Content HERE</p>

      </div>
      <div style="flex: 1" class="col f-find-us-map">map</div>
    </div>

    <div class="row">
      <div style="background: pink; flex: 2;" class="col">
        <h5>ABOUT Content HERE</h5>

        <p>Content HERE are a software solutions provider, using a combination of business consultancy and user led design to deliver scalable transformative tech solutions.</p>

        <a href="/" style="text-transform: uppercase;">Get it touch with us</a>
      </div>
      <div style="background: yellow; flex: 1;" class="col">col2</div>
      <div style="background: pink; flex: 1;" class="col">col3</div>
      <div style="background: yellow; flex: 1;" class="col">col4</div>
    </div>

  </div>
</div>

Answer 1

你想要这样的东西吗？

//Basic styling
html {
  font-family: $font-main;
  font-size: $fs-base;
  line-height: $lh-normal;
  font-weight: $fw-normal;
}

body {
  font-family: $font-main;
  line-height: $lh-normal;
  font-weight: $fw-normal;
  width: 100%;
  min-width: $vp-min-width;
  min-height: 100%;
  color: $c-black;
  background-color: $c-white;
}

html,
body,
div,
header,
footer,
section {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;
}
.w1{
  width: 20%;
}
.w2{
  width: 40%;
}
.w4{
  width: 80%;
}
.footer-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, #004c54 0%, #0097a7 100%);
  padding: calc(4rem + 0.5vw) calc(4rem + 0.5vw);
  color: #fff;
  overflow: hidden;
}

.f-find-us  p {
    font-size: 1.250em;
    margin-bottom: 1.2em;
}

.f-find-us-map {
  background: green;
}

//Headings
h1 {
  font-size: $fs-xlarge;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h2 {
  font-size: $fs-large;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h3 {
  font-size: $fs-large;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0;
}

h4 {
  font-size: $fs-normal;
  font-weight: $fw-semibold;
  line-height: initial;
  margin: 0;
}

h5 {
  font-size: $fs-xlarge;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0 0 1.2em 0;
}

h6 {
  font-size: $fs-medium;
  font-weight: $fw-semibold;
  margin: 0;
  line-height: initial;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

<div class="footer-wrapper">
  <div class="footer-container">

    <div class="row">
      <div class="col w1 f-find-us">

        <h5>How to find us</h5>

        <h6>UK</h6>

        <p>Content HERE</p>

        <h6>Singapore</h6>

        <p>Content HERE</p>

        <h6>Canada</h6>

        <p>Content HERE</p>

      </div>
      <div class="col w4 f-find-us-map">map</div>
    </div>

    <div class="row">
      <div style="background: pink;" class="col w2">
        <h5>ABOUT Content HERE</h5>

        <p>Content HERE are a software solutions provider, using a combination of business consultancy and user led design to deliver scalable transformative tech solutions.</p>

        <a href="/" style="text-transform: uppercase;">Get it touch with us</a>
      </div>
      <div style="background: yellow" class="col w1">col2</div>
      <div style="background: pink; " class="col w1">col3</div>
      <div style="background: yellow; " class="col w1">col4</div>
    </div>

  </div>
</div>