我正在尝试使网页在所有屏幕类型上统一,这是代码片段,这是标题...
@import url('(https:fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap)');
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f0;
}
/* Header Styles */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
}
header .logo {
position: fixed;
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-right: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover {
background: #fff;
color: #333;
}
/* Responsive Design */
/* Mobile Devices (480px and below) */
@media only screen and (max-width: 480px) {
body {
font-size: 14px;
}
.header {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 30px 100px;
background-color: #333;
color: #fff;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
left: 0;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-right: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover {
background: #fff;
color: #333;
}
.nav-links {
display: block;
margin-bottom: 20px;
}
}
/* Tablets and Small Laptops (481px to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
header {
padding: 25px 75px;
}
}
<header>
<a href="#" class="logo">LOGO</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
</header>
加入了响应式设计代码,但似乎效果并不完美……不同的元素已被编辑,但屏幕缩小后似乎并没有完美的结果。很高兴获得对此的评论和帮助
仔细查看代码后,我发现了一些问题。首先,您使用了太多
position: fixed;
,这通常不利于响应式网页设计。其次,您在 media
查询中使用了重复的代码。对于响应式设计,您应该只在 media
查询中使用更新的属性,并且不需要使用整个代码,而不仅仅是更新的属性。我为其提供了更新的代码。希望对你有帮助。
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f0;
}
/* Header Styles */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #333;
color: #fff;
gap: 40px;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-right: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover {
background: #fff;
color: #333;
}
/* Responsive Design */
/* Mobile Devices (480px and below) */
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
header {
padding: 25px 30px;
gap: 16px;
}
}
/* Tablets and Small Laptops (481px to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
header {
padding: 25px 75px;
gap: 32px;
}
}
<header>
<a href="#" class="logo">LOGO</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
</header>