堆栈内存溢出
  简体   繁体   English

为什么@media 屏幕在我的 web 上不起作用？

[英]Why @media screen is not working on my web?

 原文  2020-04-18 09:51:45  9   3    html/ css/ responsive-design

问题描述

Error related with @media query.与@media 查询相关的错误。

My HTML code--我的 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>

And this is my css--这是我的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;
     }
    }

I am trying the Card div to set "margin: auto;"我正在尝试 Card div 设置“margin：auto;” on mobile but it does not work.在手机上，但它不起作用。 I also added in head tag.我还添加了 head 标签。 Please suggest me.请给我建议。 And now I am testing responsive on chrome and firefox developer console.现在我正在测试 chrome 和 firefox 开发者控制台的响应性。 Is there any better ways to test?有没有更好的测试方法？ Thank You.谢谢你。

3 个解决方案

解决方案1
 0  2020-04-18 09:54:26

Replace @media(max-width: 700) with @media screen and (max-width: 700)将@media(max-width: 700)替换为@media screen and (max-width: 700)

解决方案2
 0  2020-04-18 10:09:48

add this in your head tag将此添加到您的头部标签中

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

also change @media (max-width: 700) to @media (max-width: 700px)还将@media（最大宽度：700）更改为@media（最大宽度：700px）

解决方案3
 0  2020-04-18 10:18:15

Media query looks okay, you can switch to @media screen and (max-width: 680px)媒体查询看起来不错，你可以切换到@media screen and (max-width: 680px)

In Chrome, when you inspect element, "Toggle device Toolbar" option is available.在 Chrome 中，当您检查元素时，“切换设备工具栏”选项可用。 You can see how the application looks on different devices as well as application is responsive or not.`您可以看到应用程序在不同设备上的外观以及应用程序是否响应。` 

 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 lang="en"> <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>

` `

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么 @media 屏幕 CSS 不工作？ - Why is the @media screen CSS not working? 为什么我的手机友好媒体屏幕查询无法在手机上使用？ - Why is my mobile-friendly media screen query not working on my phone? 为什么我的@media屏幕无法保存 - Why doesn't my @media screen save 为什么我的媒体查询在我的代码中不起作用？ - Why is it that my media queries not working in my code? 为什么我在媒体查询中的选择器不起作用 - why is my selector inside media query not working 为什么我的 css 媒体查询无法正常工作？ - Why is my css Media Queries not working correctly? 为什么我的 React 样式表媒体查询不起作用？ - Why is my React stylesheet media query not working? 为什么我的媒体查询不适用于大分辨率？ - Why is my media query not working for big resolution? 为什么我的媒体无法查询Arent的工作情况 - Why arent my media queries arent working 为什么我的媒体查询代码在 CSS 中不起作用？ - Why my media query code is not working in CSS?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM