gpt4 book ai didi

html - 无法显示我的移动响应的样式

转载 作者:太空宇宙 更新时间:2023-11-04 08:48:48 24 4
gpt4 key购买 nike

使用@media 设计我的手机响应式时遇到问题。我可以在网站上显示我的容器和导航,但不能在我的@media 上显示。

//========================================================
/* HEADER CONTAINER */
//========================================================

.container
background-color: #FFF
display: flex
flex-direction: row-reverse

.container:after
content: ""
display: block
clear: both
visibility: none

//========================================================
/* SITE NAVIGATION */
//========================================================

.nav
//background: pink
float: right
display: inline-block

.nav ul li
float: left
padding: 10px
list-style-type: none

.nav ul li a
text-decoration: none
color: #333

.nav ul li a:hover
color: gold
cursor: pointer

//========================================================
/* RESPONSIVE MENU ICONS */
//========================================================

.menu-icons
width: 50px
height: 50px
background-color: pink
margin-left: auto
margin-right: 10px
cursor: pointer
align-items: center
display: block
position: relative

span,
span:before,
span:after
content: ""
display: block
width: 100%
height: 2px
position: relative
background: #333

span:before
top: 15px

span:after
bottom: 17px

//========================================================
/* MOBILE NAVIGATIONS */
//========================================================

@media (max-width: 760px)
.nav
display: none
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta charset="utf-8">
<title>My portfolio</title>
</head>
<body>
<div class="container">
<div class="menu-icons">
<span><div class="bar1">
<div class="bar2">
<div class="bar3"></span>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

现在我的问题是,当我达到最大宽度 760px 时无法显示任何内容。另外,如果我将我的“响应式新图标”缩进到与我的 .nav 处于同一级别,则不会显示 PC 的实际站点,并且不确定为什么会显示响应式。

最佳答案

像这样使用媒体查询

 @media only screen and (max-width: 760px) {

像这样使用css

 .container {
background-color: #FFF;
display: flex;
flex-direction: row-reverse;
}

在 css 中使用分号和 { } 定义类样式

关于html - 无法显示我的移动响应的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43589380/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com