我試圖在螢屏尺寸小于時使標題影像保持靜態，1052px以便它占據視口的整個寬度，但只有在螢屏尺寸小于時才會應用樣式992px。這是來自 Angela Yu 的 Web 開發課程。
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 25%;
}
media (max-width: 1052px) {
.title-image {
position: static;
}
}<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tindog</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/b2df711599.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- JS and Jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-lg btn-dark download-button"><i class="fa-brands fa-apple"></i>
Download</button>
<button type="button" class="btn btn-lg btn-outline-light download-button"><i
class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="https://via.placeholder.com/400" alt="iphone-mockup">
</div>
</div>
</body>這是它的樣子，請幫助我。
uj5u.com熱心網友回復：
嘗試類似的東西
@media only screen and (max-width: 1052px) {
.title-image {
position: static;
}
}
您還將列設定為始終為螢屏寬度的一半，您可能還需要添加 col-12 和 col-lg-6 以便在較小的螢屏上它變為全寬
uj5u.com熱心網友回復：
將您的媒體查詢更改為：
@media only screen and (max-width: 1052px) {
.title-image {
position: static;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507491.html
上一篇：Bootstrapnavbar[mobileorphoneaspectratio]下拉選單左對齊而不是右對齊
下一篇：服務回傳空陣列