我最近編碼了一個網頁，我能夠得到結果。但是我現在遇到了 css 視口問題。我的網頁在最小化視窗時只顯示我內容的左側部分，而不是顯示完整內容，請幫助伙計們。我目前在 github 中托管了該頁面。網頁github鏈接：https : //jtmuthu.github.io/card1/
uj5u.com熱心網友回復：
可能是因為你使用
左：460px；
相反，這嘗試使用標簽。
- 建議使用媒體查詢進行回應
uj5u.com熱心網友回復：
您使用固定值進行定位，這不適用于調整頁面大小。
您需要處理百分比、回應式定位和其他流體值。
我從你的 github 頁面創建了一個片段并更改了必要的樣式。
body {
background-color: hsl(225, 100%, 94%);
margin: 0;
height: auto;
width: auto;
font-family: 'Red Hat Display', sans-serif;
}
.bg-img {
width: 100%;
height: auto;
}
.card {
background-color: hsl(225, 100%, 98%);
color: black;
position: relative;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
max-width: 450px;
margin: 50px auto;
}
.music {
background-color: rgba(232, 232, 232, 1);
border-radius: 10px;
color: black;
height: 90px;
width: calc(100% - 120px);
margin: 0 60px;
}
.cardimg {
border-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
h1 {
text-align: center;
padding-top: 40px;
}
.p1 {
text-align: center;
width: 70%;
line-height: 2;
margin-left: 65px;
}
.msic {
position: relative;
left: 20px;
top: 20px;
}
.p2 {
float: right;
padding-right: 140px;
line-height: 2;
}
a {
position: relative;
left: 200px;
bottom: 14px;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: blue;
}
.p3 {
color: hsl(224, 23%, 55%);
padding-left: 180px;
padding-top: 30px;
}
.p3:hover {
color: black;
font-weight: bolder;
}
.btn {
position: relative;
left: 40px;
top: 20px;
color: white;
background-color: rgb(56, 41, 224);
height: 50px;
width: 360px;
border: none;
border-radius: 10px;
font-size: 16px;
}
.btn:hover {
background-color: rgba(56, 41, 224, 0.8);
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" href="https://jtmuthu.github.io/card1/images/favicon-32x32.png">
<title>Summary Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Red Hat Display:wght@300&display=swap" rel="stylesheet">
<style></style>
</head>
<body>
<div class="bg">
<img class="bg-img" src="https://jtmuthu.github.io/card1/images/pattern-background-desktop.svg" alt="bg">
</div>
<div class="card">
<img class="cardimg" src="https://jtmuthu.github.io/card1/images/illustration-hero.svg" alt="hero">
<h1>Order Summary</h1>
<p class="p1">You can now listen to millions of songs, audiobooks and podcasts on any device anywhere you like!</p>
<div class="music">
<img class="msic" src="https://jtmuthu.github.io/card1/images/icon-music.svg" alt="msic">
<p class="p2"><strong>Annual Plan</strong> <br> $59.99/year</p>
<a href="#">Change</a>
</div>
<div class="bottom">
<button class="btn" type="button" name="button">Proceed to Payment</button>
<p class="p3">Cancel Order</p>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
這是因為您對位置進行了硬編碼。瀏覽器視窗的大小，它們保持不變。
我的建議：使用flexbox。有了這個，您可以將所有內容都放在沒有left或bottom值的情況下。（注意：如果瀏覽器視窗比卡片小，顯然會被剪掉一部分。為此你可以使用媒體查詢）。
<body>
<div class="flexbox">
<div class="container">
// All the content here WITHOUT POSITIONING
</div>
</div>
</body>
而作為 css
.flexbox{
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 450px;
height: 660px;
}
還有一把小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317296.html
下一篇：js從樣式代碼元素復制干凈的代碼