所以我在一個只使用 HTML 和 CSS 的靜態網站上作業。我在桌面視圖中制作了網站，因此當螢屏尺寸超過 1220 像素時，網站的外觀將完全符合我的要求。為了選擇服務，我有一張圖片作為背景，里面有一些文字。圖片尺寸為 420x469 像素。我總共有 4 張圖片，我將它們成對放置 2。所以像這樣（服務 1）（服務 2）。我在左側和右側都有 7.8% 的填充，在底部有 8% 的填充。目前，如果有人通過手機訪問我的網站，則服務 1 會顯示 7.8% 的左側填充和半切圖。然后它下面的服務 2 就像服務 1 一樣。我想要的是當有人通過電話使用網站時，他們可以完全看到圖片并且沒有填充。如果有足夠的空間，那么一些填充請告訴我該怎么做
uj5u.com熱心網友回復：
在這里查看這些檔案： https ://www.w3schools.com/css/css_rwd_mediaqueries.asp
然后你可以像這樣使用CSS
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
@media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>額外提示：一般不要使用最大寬度，而是使用最小寬度。這意味著您將首先在移動設備上作業。
uj5u.com熱心網友回復：
在 css 中添加這一行，它將在任何螢屏尺寸下完美運行
.service1{
width: 100%;
height: auto;
}
uj5u.com熱心網友回復：
專門為“電話”定義一個@media 查詢，如下所示：
@media (max-width: 640px) { /*...*/ }
您可能希望洗掉任何較小螢屏尺寸的填充/邊距。試試這樣：
@media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
否則，請嘗試使用引導程式，它在使用螢屏大小調整邊距/填充時效果很好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410719.html
標籤：
上一篇：切換按鈕需要單擊兩次
下一篇：如何通過Docker-compose在ConnectionStrings中使用自定義服務器名稱將應用程式與MySQL連接？