【发布时间】：2022-06-15 22:23:46
【问题描述】：
好吧，当 Safari 为全屏时，一切正常，但是当我开始更改分辨率时，我的网站看起来很糟糕，我该如何解决？我应该学习 @media_rule 还是我可以更改我的 CSS/HTML 代码？ 这是我的 CSS：
<head>
<title>hope_lake</title>
<style>
body {
margin: 0;
padding: 0;
}
#upper-menu{
text-align: center;
color: white;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #2b2b2b;
position: fixed;
top: 0;
z-index: 500;
width:100%;
}
li {
float: right;
font-size:120%;
}
li a {
display: block;
color: white;
text-align:center;
padding: 25px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
#hope{
color: white;
padding: 1%;
text-align:center;
float: left;
font-size:158%;
}
.centered {
position: absolute;
font-size:600%;
color: white;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
}
.lower-centered{
position: absolute;
font-size:200%;
top:52%;
color: white;
left: 50%;
transform: translate(-50%, -50%);
}
.About{
margin:auto;
text-align:center;
font-size:250%;
top:100%;
padding:75px;
font-family: 'Quicksand', sans-serif;
}
#About-page{
position: absolute ;
font-size:125%;
text-align:center;
width: 30%;
height: 35%;
background-color:#F0F8FF;
left: 19%;
padding:2% ;
margin-top:5%;
}
#about-image{
float: right;
margin-right:12%;
margin-top: 1%;
}
#Service{
margin-top:40%;
background-color:#f1f1f1;
padding-bottom:7%;
}
.Services{
margin:auto;
text-align:center;
font-size:250%;
font-family: 'Quicksand', sans-serif;
padding:75px;
}
.Consulting{
margin:auto;
text-align:left;
font-size:150%;
font-family: 'Ubuntu', sans-serif;
padding-left:24.5%;
padding-top:1%;
}
#img1-service{
border-radius:50%;
margin-left:25%;
margin-top:-3%;
}
#p1{
text-align: center;
font-size:125%;
margin-left:-39.6%;
margin-top:0.5%;
}
.Finance{
margin:auto;
text-align:center;
font-size:150%;
font-family: 'Ubuntu', sans-serif;
margin-top:-8.5%;
}
#img2-service{
border-radius:50%;
float:right;
margin-right:45%;
margin-top: -19.4%;
}
#p2{
text-align: center;
font-size:125%;
margin-top:0.5%;
}
.Marketing{
margin:auto;
text-align:center;
font-family: 'Ubuntu', sans-serif;
font-size:150%;
margin-right:-41%;
margin-top:-8.5%;
}
#img3-service{
border-radius:50%;
float:right;
margin-right:25%;
margin-top: -19.4%;
}
#p3{
text-align: center;
font-size:125%;
margin-top:0.5%;
margin-right:-41%;
}
.Contact{
margin:auto;
text-align:center;
font-family: 'Quicksand', sans-serif;
font-size:250%;
padding:75px;
}
.Place{
margin:auto;
text-align:left;
font-size:120%;
padding:75px;
margin-top:-7%;
margin-left:7%;
}
#fname{
float:right;
margin-right:33.4%;
height:40px;
margin-top:-6%;
background-color:#f1f1f1;
}
#lname{
float:right;
margin-right:14%;
height:40px;
margin-top:-6%;
background-color:#f1f1f1;
}
#email{
float:right;
background-color:#f1f1f1;
margin-right:14%;
height:40px;
margin-top:-1.5%;
}
#text{
background-color:#f1f1f1;
float:right;
margin-top:3%;
height:125px;
margin-right:-37%;
width:36.5%;
font-size: 17px;
}
input::-webkit-input-placeholder {
font-size: 15px;
line-height: 6;
}
.map{
position: absolute;
left: 0;
padding-top:17%;
}
#some-text{
margin:auto;
text-align:center;
font-size:75%;
color:white;
font-family: 'Ubuntu', sans-serif;
margin-top:2%;
padding-bottom:3%;
}
#some-list{
font-size:60%;
margin-right:44%;
color:white;
font-family: 'Ubuntu', sans-serif;
margin-top:55%;
padding-top:4%;
list-style: none;
overflow: hidden;
}
</style>
P.s 我使用 django/Python，这是我的第一个项目，所以我不完全了解 知道如何快速正确地做到这一点。
【问题讨论】：
-
这不是您在 Stack Overflow 上提出的问题类型。为了给你一些提示，我会学习 flexbox。对于 flexbox 不适合的所有内容，媒体查询是您最好的朋友。