我的问题是文本内容溢出了框或容器 - 这里的问题是什么?
我听说过max-width
和max-height
,但无法使其起作用。
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product Landing</title>
<link rel="stylesheet" href="product landing.css">
</head>
<body>
<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>
</body>
</html>
CSS
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: 100px;
}
.testimonials {
background-color: yellow;
height: 100%;
}
.pricing {
background-color: green;
height: 100%;
}
最大宽度和flex-basis
缩放时,它有助于使用非px值进行填充,字体大小,边距等,等等。
字体大小设置为页面默认值(16px
(,列之间的距离为 100px
-这些不调整大小,因此内容溢出了容器。
请参见下面的示例,了解其使用"查看单元"(vw
单位(的外观。视图单元是根据当前屏幕尺寸计算的,因此它们比Percents缩放甚至更好。它们是通过将屏幕分为100宽x 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/