我正在创建一个网站，但在将代码转换为@media 时遇到了困难。当我在桌面上加载网站时，我可以看到所有内容，但是当我在手机上打开它时，页面上并没有显示所有内容，而且我无法让它显示出来。
这是我使用的代码。我使用过 HTML 和 CSS。
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
}
/* Own CSS code */
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background: whitesmoke;
}
.container {
display: flex;
}
.card {
height: 500px;
margin: 50px;
box-shadow: 5px 5px 20px black;
overflow: hidden;
border-radius: 10px;
position: relative;
}
.card:hover {
cursor: pointer;
}
img {
height: 500px;
width: 350px;
border-radius: 10px;
transition: filter 0.5s;
}
/* image turn ^ transform: scale(1.1) rotate(-3deg);^ */
.card:hover img {
transform: scale(1.1);
filter: blur(2px);
transition: filter 0.5, transform 0.5s;
}
.intro {
height: 70px;
width: 350px;
padding: 6px;
box-sizing: border-box;
position: absolute;
background: rgb(27, 27, 27, .5);
color: white;
bottom: 0px;
transition: height0.5s, background 0.5s;
}
.card:hover .intro {
height: 220px;
bottom: 0px;
background: black;
}
h1 {
margin: 20px;
font-size: 30px;
text-align: left;
}
p {
margin: 20px;
font-size: 15px;
text-align: left;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
.card:hover p {
opacity: 1;
visibility: visible;
}
span {
font-weight: bold;
}
@media (min-width: 300px)and (max-width: 800px) {
.container {
flex-direction: column;
display: flex;
padding: 5px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSafari</title>
<link rel="stylesheet" href="stylecopy.css">
</head>
<body>
<div class="container">
<div class="card">
<img src="img/Phone.jpg" alt="Phone">
<div class="intro">
<h1>Phone</h1>
<p> Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit Aenean commodo ligula eget dolor. Aenean massa.
</p>
</div>
</div>
<div class="card">
<img src="img/computer.jpg" alt="computer">
<div class="intro">
<h1>Computer</h1>
<p> Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit Aenean commodo ligula eget dolor. Aenean massa.
</p>
</div>
</div>
<div class="card">
<img src="img/laptop.jpg" alt="wesbite">
<div class="intro">
<h1>Website</h1>
<p> Lorem <span>ipsum</span> dolor sit amet, consectetuer adipiscing elit Aenean commodo ligula eget dolor. Aenean massa.
</p>
</div>
</div>
</body>
</html>为了确保您的布局在较小的屏幕（例如移动设备）上响应良好，您需要调整 Flexbox 属性并确保容器和卡片元素在移动设备上垂直堆叠。
这里有一个增强的解决方案，可将代码转换为@media，以便它在桌面和移动设备上都能正确显示：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
}
/* Main Styles */
body {
display: flex;
justify-content: center;
align-items: center;
background: whitesmoke;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 90%;
}
.card {
background: white;
margin: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
body {
flex-direction: column;
align-items: flex-start;
padding: 20px;
}
.container {
flex-direction: column;
align-items: center;
}
.card {
width: 100%;
max-width: 400px;
}
}
变化： 容器布局：.container 设置为 flex-wrap：wrap，因此它会根据屏幕尺寸自动调整。
卡片大小：对于桌面，.card 的固定宽度为 300 像素。在较小的视口（移动设备）中，它会更改为 100% 宽度，以适应屏幕。
@media Query：媒体查询在最大宽度：768px（平板电脑和手机屏幕）处触发。布局更改为垂直（列）布局以适应较小的屏幕。
Flexbox 调整：在移动设备上时，卡片将一张堆叠在另一张之上，并且align-items:center 确保它们正确居中。
HTML 验证： HTML 结构看起来不错。确保图像路径（img/Phone.jpg 等）正确设置为服务器上的实际文件位置。