元素的响应性问题
Issues with the responsiveness of elements
作为新手,我 运行 遇到了代码响应元素的问题。
<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}
.header h1 {line-height: 1px;}
.header {flex: 60%;}
.nav-parent {flex: 40%;}
.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}
ul li {list-style: none;}
ul li ~ li {margin-left: 8px;}
.btn {flex: 1; padding: 8px 0; text-align: center;}
.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }
.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
<div class="header">
<h1>Lorem Ipsum</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="option active btn">Option</li>
<li class="option1 btn">Option1</li>
<li class="option2 btn">Option2</li>
<li class="option3 btn">Option3</li>
<li class="option4 btn">Option4</li>
<li class="option5 btn">Option5</li>
</ul>
</div>
</div>
</head>
</body>
</html>
在 590 像素以下,“Lorem Ipsum”文本相互合并。
当我将屏幕尺寸折叠到 591 像素以下时,我希望响应式元素看起来像这样。
我应该怎么做才能达到上面发布的图片的效果?
设置行高大于原来的字体大小。如果您不确定,请设置 line-height: 1
<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}
.header h1 {line-height: 1;}
.header {flex: 60%;}
.nav-parent {flex: 40%;}
.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}
ul li {list-style: none;}
ul li ~ li {margin-left: 8px;}
.btn {flex: 1; padding: 8px 0; text-align: center;}
.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }
.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
<div class="header">
<h1>Lorem Ipsum</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="option active btn">Option</li>
<li class="option1 btn">Option1</li>
<li class="option2 btn">Option2</li>
<li class="option3 btn">Option3</li>
<li class="option4 btn">Option4</li>
<li class="option5 btn">Option5</li>
</ul>
</div>
</div>
</head>
</body>
</html>
或考虑在响应式视图中更改其字体大小。
一个好的起点 - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
作为新手,我 运行 遇到了代码响应元素的问题。
<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}
.header h1 {line-height: 1px;}
.header {flex: 60%;}
.nav-parent {flex: 40%;}
.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}
ul li {list-style: none;}
ul li ~ li {margin-left: 8px;}
.btn {flex: 1; padding: 8px 0; text-align: center;}
.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }
.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
<div class="header">
<h1>Lorem Ipsum</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="option active btn">Option</li>
<li class="option1 btn">Option1</li>
<li class="option2 btn">Option2</li>
<li class="option3 btn">Option3</li>
<li class="option4 btn">Option4</li>
<li class="option5 btn">Option5</li>
</ul>
</div>
</div>
</head>
</body>
</html>
在 590 像素以下,“Lorem Ipsum”文本相互合并。
当我将屏幕尺寸折叠到 591 像素以下时,我希望响应式元素看起来像这样。
我应该怎么做才能达到上面发布的图片的效果?
设置行高大于原来的字体大小。如果您不确定,请设置 line-height: 1
<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}
.header h1 {line-height: 1;}
.header {flex: 60%;}
.nav-parent {flex: 40%;}
.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}
ul li {list-style: none;}
ul li ~ li {margin-left: 8px;}
.btn {flex: 1; padding: 8px 0; text-align: center;}
.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }
.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
<div class="header">
<h1>Lorem Ipsum</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="option active btn">Option</li>
<li class="option1 btn">Option1</li>
<li class="option2 btn">Option2</li>
<li class="option3 btn">Option3</li>
<li class="option4 btn">Option4</li>
<li class="option5 btn">Option5</li>
</ul>
</div>
</div>
</head>
</body>
</html>
或考虑在响应式视图中更改其字体大小。
一个好的起点 - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp