在下面的兩張圖片中，您可以看到更改寬度對字體大小沒有任何影響，因此 **text 會從側邊欄出來。
我希望側邊欄文本在其父（側邊欄）的寬度相對于正文減小時自行調整大小
圖片下方給出了代碼（HTML 和 CSS）
HTML:-
<body>
<div class="container">
<div class="header">
<div class="header-image"><img src="images/logo.png" alt="logo"></div>
<nav>
<ul class="left-menu">
<li> <a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="right-menu">
<li><a href="#"> 91 964941****</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</nav>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
<p>We offer demo sessions before making you enroll in any training course.
We respect your money and our content quality will be worth every penny of yours. Have Faith :) </p>
</div>
<aside class="siderbar">
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Discord</a></li>
</ul>
</aside>
</div>
</body>
CSS :-
body{
background-color:#191C26;
color:white;
}
/* Start of Header */
.header{
margin-top:20px;
height:100px;
margin-left:150px;
}
.header-image{
width:10%;
display: inline-block;
position:relative;
top:36px;
}
.header-image img{
width:100%;
}
.left-menu, .right-menu{
list-style: none;
font-size: 200%;
}
.left-menu a, .right-menu a{
text-decoration: none;
display: inline-block;
color:white;
}
.left-menu{
float:left;
margin:0px;
margin-left:12%;
}
.left-menu li{
float:left;
}
.left-menu a{
margin-right:20px;
}
.right-menu{
float:right;
margin:0;
}
.right-menu li{
float:left;
margin-left:10px;
}
.right-menu a{
margin-left:20px;
}
/*End of Header */
/*Start of Mid Content*/
.content-a{
width:45%;
margin:auto;
margin-top:80px;
}
.content-a h1{
font-size: 150px;
margin:0px;
}
.siderbar{
display:inline-block;
position:fixed;
top:0px;
left:0px;
height:800px;
width:10%;
background-color: black;;
}
.siderbar ul{
list-style: none;
padding:0px;
margin-top:400px;
margin-bottom:486px;
width:100%;
}
.siderbar a{
display:inline-block;
text-decoration: none;
color:inherit;
margin-bottom: 20px;
width:100%;
font-size: 200%;
}
uj5u.com熱心網友回復：
嘗試使用 vw 作為字體大小，如下所示：
font-size: 8vw;
或使用這樣的媒體查詢：
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
uj5u.com熱心網友回復：
而不是使用像素值使用rem或em。
例如：你寫了這樣的東西
.content-a h1{
font-size: 150px;
margin:0px;
}
改用這個
.content-a h1{
font-size: 9.375rem;
margin:0;
}
注意： em 和 rem 是相對長度，而 pixel (px) 是絕對長度值
uj5u.com熱心網友回復：
我認為這可能會起作用，試試這個（使用媒體查詢進行回應）
CSS：
.siderbar a {
display: inline-block;
text-decoration: none;
color: inherit;
margin-bottom: 20px;
width: 100%;
font-size: 1rem;
}
@media (min-width: 55rem) {
.siderbar a {
font-size: 1rem;
}
}
@media (max-width: 55rem) {
.siderbar a {
font-size: 0.7rem;
}
}
@media (max-width: 42rem) {
.siderbar a {
font-size: 0.5rem;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424594.html
上一篇：元素的行不會與中心對齊