首页猿问为什么 @media screen...

为什么 @media screen 无法在我的网站上运行？

Html5

慕沐林林 2024-01-11 10:40:53

我的 HTML 代码--<div class="Card"><div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div><div class="FestivalDetails">Hello World</div></div><div class="Card"><div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div><div class="FestivalDetails">Hello World</div></div><div class="Card"><div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div><div class="FestivalDetails">Hello World</div></div>这是我的 CSS——.Card { background: #fff; border-radius: 2px; display: inline-block; height: 500px; margin: 1rem; position: relative; width: 300px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); padding: 30px auto; overflow: hidden; justify-content: center; } .FestivalDetails { position: absolute; width:auto; max-width: 500px; height: auto; display: block; padding: 20px 20px; } .FestivalPhoto { height: 200px; width: auto; position: relative; top: 0; display: block; overflow: hidden; margin: auto; background-size: initial; } @media(max-width: 700) { .Card { background: #000; border-radius: 2px; display: block; height: 500px; margin: auto; position: relative; width: 80%; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); padding: 30px auto; overflow: hidden; } }我正在尝试将 Card div 设置为“margin: auto;” 在移动设备上但它不起作用。我还添加了 head 标签。请建议我。现在我正在 Chrome 和 Firefox 开发者控制台上测试响应式。有没有更好的测试方法？谢谢。

查看完整描述

3 回答

慕勒3428872

TA贡献1848条经验获得超6个赞

将其添加到您的 head 标签中

 <meta name="viewport" content="width=device-width, initial-scale=1">

还将@media（最大宽度：700）更改为@media（最大宽度：700px）

反对回复 2024-01-11

波斯汪

TA贡献1811条经验获得超4个赞

@media(max-width: 700)用。。。来代替@media screen and (max-width: 700)

反对回复 2024-01-11

至尊宝的传说

TA贡献1789条经验获得超10个赞

媒体查询看起来不错，您可以切换到@media screen 和（最大宽度：680px）

在 Chrome 中，当您检查元素时，“切换设备工具栏”选项可用。您可以查看应用程序在不同设备上的外观以及应用程序是否响应。

div.logo-inline-div {

text-align: center;

margin: auto;

padding: 16px 24px 10px 10px;

border-radius: 8px;

background-color: white;

box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);

}

.row {

width: 100%;

display: flex;

flex-wrap: wrap;

align-items: center;

}

.col-1 {

width: 12.4%;

}

img {

width: 100px;

height: 200px;

object-fit: cover;

}

.Card {

background: #fff;

border-radius: 2px;

display: inline-block;

height: 500px;

margin: 1rem;

position: relative;

width: 300px;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

padding: 30px auto;

overflow: hidden;

justify-content: center;

}

.FestivalDetails {

position: absolute;

width: auto;

max-width: 500px;

height: auto;

display: block;

padding: 20px 20px;

}

.FestivalPhoto {

height: 200px;

width: auto;

position: relative;

top: 0;

display: block;

overflow: hidden;

margin: auto;

background-size: initial;

}

/*@media screen and (max-width: 680px) {*/

@media (max-width: 700) {

.col-1 {

width: 100%;

margin: 0;

}

div.logo-inline-div {

padding: 5px;

display: block;

}

.Card {

background: #000;

border-radius: 2px;

display: block;

height: 500px;

position: relative;

width: 80%;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

padding: 30px auto;

overflow: hidden;

}

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>