首頁猿問為什么 @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 標簽。請建議我?，F在我正在 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>