如何将媒体查询应用于我的风格失败 sheet

Question

我不熟悉过去 2 天的媒体查询我尝试了很多次并搜索了几次，但我仍然未能将查询添加到我的样式中 sheet...

我只想将媒体查询应用于所有设备的 css。任何人都可以帮助我为所有 div、table.

设置合适的宽度和高度

这是代码

@media only screen and (min-width: 320px) and (max-width: 979px) {
html ,body{ 
 width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
   /* overflow-x: hidden;*/ 
text-align: right;  direction: rtl;
}

body {
  background:#77d5fb;
 text-align: center;
 font-size: 11px; 
 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 opacity: .98;

}

table.body {
 width: 950px;
 background: #fff;
 padding: 10px;
 margin-top:70px;
 border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
    -moz-box-shadow:0px 0px 20px #fff;
    -webkit-box-shadow:0px 0px 20px #fff;
    box-shadow:0px 0px 20px #fff;
min-height:100%;
}

.container{
width:100%;
background:#fff;
min-height:100%;
 position:relative;
 padding-bottom:105px;

}

#footer{
background:#eee;
      left:0px;
      right:0px;
      bottom:0px;
      width:100%;
      height:171px;
   position:absolute;   
  }   
  

        #Layer1 {
 position:absolute;
 position:fixed;
 top:0px;
 width:100%;
 height:50px;
 z-index:1;
 padding-left:0px;
 padding-right: 0px;
background: #fff;
   text-align: right;  direction: rtl;
} 
    
div.content {
 width: 950px; 
 padding: 10px 0px 20px 0px; 
 text-align: left; 
 margin-left: auto; 
 margin-right: auto;
 min-height:100%;

}}

<div class="container">
    <div id="Layer1">Top Nav</div>
<table cellpadding='0' cellspacing='0' class='body' align='center'>
<tr>
    <td><div class='content'>Content here</div></td></tr></table><div id='footer'>Footer</div></div>

Answer 1

不是很清楚你在追求什么，但是为了获得responsive设计，那么你应该使用%而不是固定宽度，即-px。

如果这不是您想要的，请创建一个 fiddle。

旁注 - 在 body 上设置 opacity 将影响其上的所有元素。最好在 background 上使用 rgba 而不是设置 opacity.

body {
  /* background:#77d5fb; 
  opacity: .98;*/
  background-color: rgba(119,213,251, .98);
  text-align: center;
  font-size: 11px;  
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;

}

您应该删除 950px，因为如果 body 的宽度小于 950px，它会移出容器。将它们设置为 percentages 而不是固定宽度。如果您不将它们用于其目的，那么使用 table 也毫无意义。使用 floats 和 % 宽度值（如果需要），而不是 table.

table.body {
  width: 90%;  /* or 100%, depending on what you're after */
  /* other css styles */
}


div.content {
    width: 90%;  /* or 100%, depending on what you're after */
    /* other css styles */
}

你先从移动开始，像这样：

@media (min-width: 320px) and (max-width: 560px) {
    // styles here
}

@media (min-width: 768px) and (max-width: 1024px) {
    // styles for that size here
}

@media (max-width: 1024px) {
   // desktops
}

@media (max-width: 1200px) {
   // large desktops
}

如果你想要orientation，那么你需要做：

@media (min-device-width: XXXpx) and (max-device-width: XXXpx) and (orientation:portrait) 
*/ or orientation:landscape */ {
     // styles
}

重要

在任何 media 查询工作之前，您的 header 中需要这个

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

如何将媒体查询应用于我的风格失败 sheet

failed how to apply Media queries to my style sheet

css

media