При масштабировании помогает использовать значения не-px для отступов, размера шрифта, полей и т. Д. И т. Д.
Размер шрифта был установлен по умолчанию для страницы (16px
) и расстояниямежду столбцами было 100px
- они не меняли размер, поэтому содержимое переполняло контейнер.
См. ниже пример того, как он выглядит с использованием «единиц измерения» (vw
единиц).Единицы просмотра рассчитываются в соответствии с текущим размером экрана, поэтому они масштабируются даже лучше, чем проценты.Они рассчитываются путем деления экрана на 100 в ширину на 100 в высоту, но они поддерживают частичные единицы (например, 2.35vw
), поэтому они довольно гранулированные.
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.main-container {
background-color: brown;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: blueviolet;
}
.logo-img {
margin-right: auto;
}
.navbar > li {
display: inline-block;
margin: 0px 10px;
padding: 5px 10px;
text-align: center;
}
.navbar > :nth-child(3){
color: aquamarine;
background-color: cornflowerblue;
border : 2px solid cornflowerblue;
padding: 5px 5px;
border-radius: 50px;
}
.navbar > li > a {
color: blanchedalmond;
text-decoration: none;
transition: all 0.7s ease 0s;
}
.navbar > li > a:hover {
color: crimson;
}
.features {
background-color: red;
height: 100%;
text-align: center;
display: grid;
}
.boxs {
list-style: none;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-column-gap: 10vw;
font-size:1.5vw;
}
.testimonials {
background-color: yellow;
height: 100%;
}
.pricing {
background-color: green;
height: 100%;
}
<main class="main-container">
<nav class="navbar-container">
<img src="logo.svg" class="logo-img">
<ul class="navbar">
<li class="select-items"><a href="#">Features</a></li>
<li class="select-items"><a href="#">Testimonials</a></li>
<li class="select-items"><a href="#">Pricing Table</a></li>
</ul>
</nav>
<section class="features">
<h1>The Benefits</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid</p>
<ul class="boxs">
<li>
<h2>GPS Tracking</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Heartbeat Analysis</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Security first</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Innovative idea</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Save your bills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Proven technology</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
</ul>
</section>
<section class="testimonials"></section>
<section class="pricing"></section>
</main>
Ссылка:
https://css -tricks.com / fun-viewport-units /