所以我試圖編輯一個讓我頭疼的簡單網頁。所以在一個簡單的個人電腦上，這個網頁看起來很不錯，但在移動設備上它看起來很糟糕。我試著用我從互聯網上知道的一些資訊來編輯它，但沒有任何效果......我真的很抱歉我發布這個，因為這可能是一個愚蠢的問題:(這是我在談論的內容：
PC
電話
您也可以通過輸入網站進行檢查：https : //lyrex.ro/
另外，這里是代碼
<style>
:root {
--header-background: linear-gradient(#212121 0,rgb(74 69 69 / 18%) 0%,#252323 90%);
}
#maintenance {
background: url(https://i.imgur.com/Ik4qFXl.jpg)!important;
width: 100%;
height: 320px;
}
#maintenance:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 320px;
background: var(--header-background);
}
.logo img {
width: 600px;
height:auto;
}
#maintenance .logo {
height: 160px;
}
#particles-js {
position: absolute;
height: 100%;
width: 100%;
margin: 0 auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
pointer-events: none;
}
.maintenance-data {
text-align: center;
}
.maintenance-title {
font-size: 30px;
margin-top: 10px;
margin-bottom: 2ch;
}.maintenance-mess {
font-size: 25px;
margin-top: 1.3ch;
margin-bottom: 3ch;
}
button.ui.primary.button {
margin-right: 20px;
}
.ui.buttons{
margin-top: 3ch;
}
.ui.buttons.button:first-child {
border-left: none;
margin-left: 0;
border-radius: .28571429rem;
}.ui.buttons .button:last-child {
border-radius: .28571429rem;
}
.login-button {
background: var(--panel-body);
padding: 10px 18px;
color: var(--main-color);
margin-left: 30px;
border-radius: .28571429rem;
-webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
}
#preloader {
z-index: -1;
}
</style>
<div class="ui container" id="maintenance">
<div id="particles-js"></div>
<div class="logo"><a href="https://lyrex.ro/discord"><img src="https://i.imgur.com/QghSfu2.png"></a></div>
</div>
<div class="maintenance-data">
<h2 class="maintenance-title">{$MAINTENANCE_TITLE}</h2>
<div class="maintenance-mess">{$MAINTENANCE_MESSAGE}</div>
<div class="ui buttons">
<button class="ui positive button" onclick="window.location.reload()">{$RETRY}</button>
</div>
{if isset($LOGIN)}
<a class="login-button" href="{$LOGIN_LINK}">{$LOGIN}</a>
{/if}
</div>
</div>
<script type="text/javascript">
{literal}
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 2000
}
},
"color": {
"value": "#dc3545"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 4
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 0.5,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 8,
"random": true,
"anim": {
"enable": true,
"speed": 2,
"size_min": 0,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 2.8914764163227265,
"direction": "top",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
var count_particles, stats, update;
{/literal}
</script>
</body>
</html>```
uj5u.com熱心網友回復：
對于回應式觀點，請將這些添加到您的代碼中
.logo img {
width: 100%;
height: auto;
margin: auto;
max-width: 600px;
}
將margin:auto;和添加max-width:600px;到徽標 img
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384474.html
下一篇：如何用css制作這個頂部邊框？