为什么 @media screen 无法在我的网站上运行？
我的 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 开发者控制台上测试响应式。有没有更好的测试方法？谢谢。
慕沐林林浏览 50回答 3
3回答
-
慕勒3428872
将其添加到您的 head 标签中 <meta name="viewport" content="width=device-width, initial-scale=1">还将@media（最大宽度：700）更改为@media（最大宽度：700px） -
波斯汪
@media(max-width: 700)用。。。来代替@media screen and (max-width: 700) -
至尊宝的传说
媒体查询看起来不错，您可以切换到@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> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="EightImages.css" /> <link rel="images" href="images" /> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> <div class="col-sm-12 col-1"> <div class="logo-inline-div"> <img src="images/sunset1.png" /> <label>Build an Empire</label> <p> Test </p> </div> </div> </div> </div> <div class="Card"> <div class="FestivalPhoto"> <img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" /> </div> <div class="FestivalDetails">Hello World</div> </div> <div class="Card"> <div class="FestivalPhoto"> <img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" /> </div> <div class="FestivalDetails">Hello World</div> </div> <div class="Card"> <div class="FestivalPhoto"> <img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" /> </div> <div class="FestivalDetails">Hello World</div> </div> </body></html>
随时随地看视频慕课网APP
相关分类
Html5