Как сохранить порции с макетом VH? - PullRequest
Новая
       24

Как сохранить порции с макетом VH?

0 голосов
/ 18 февраля 2019

Я пытаюсь добиться следующего макета (изображение 1), и идея в том, что он должен сохранять одинаковую структуру и пропорции в зависимости от экрана (экран рабочего стола и ноутбука)

image 1

Тем не менее, в моем текущем коде он отлично выглядит на рабочем столе, но я не знаю, как сохранить элементы и текст на экранах ноутбуков без изменения макета.В основном содержимое элементов (Текст) выходит за рамки (переполнение).Я использую 100VH, flexboxes и clac (), но мне не повезло - я должен перейти на Grid?

Image 2

Кто-нибудь знает, как могЯ разрабатываю этот макет и поддерживаю масштабируемость содержимого (блоков и текста) в зависимости от экрана пользователя (ноутбук - рабочий стол) 

//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>

1 Ответ

0 голосов
/ 18 февраля 2019

ты хочешь что-то подобное? 

//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>
...