Css 如何将媒体查询应用于我的样式表失败_Css_Media

Css 如何将媒体查询应用于我的样式表失败

css

Css 如何将媒体查询应用于我的样式表失败,css,media,Css,Media,我不熟悉过去两天的媒体查询，我尝试了很多次，搜索了好几次，但仍然无法将查询添加到我的样式表中我只想将媒体查询应用到所有设备的css中。任何人都可以帮我为所有div、table设置合适的宽度和高度这是密码 @仅媒体屏幕和（最小宽度：320px）和（最大宽度：979px）{ html，正文{ 宽度：100%；身高：100%；边际：0px；填充：0px； /*溢出-x:隐藏；*/ 文本对齐：右；方向：rtl； } 身体{ 背景#77d5fb；文本对齐：居中；字体大小：11px；字体系

我不熟悉过去两天的媒体查询，我尝试了很多次，搜索了好几次，但仍然无法将查询添加到我的样式表中

我只想将媒体查询应用到所有设备的css中。任何人都可以帮我为所有div、table设置合适的宽度和高度

这是密码

@仅媒体屏幕和（最小宽度：320px）和（最大宽度：979px）{
html，正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
/*溢出-x:隐藏；*/
文本对齐：右；方向：rtl；
}
身体{
背景#77d5fb；
文本对齐：居中；
字体大小：11px；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
不透明度：.98；
}
表体{
宽度：950px；
背景：#fff；
填充：10px；
利润上限：70像素；
边界半径：6px；
-webkit边界半径：6px；
-moz边界半径：6px；
-moz盒阴影：0px 0px 20px#fff；
-网络工具包盒阴影：0px 0px 20px#fff；
盒影：0px 0px 20px#fff；
最小高度：100%；
}
.集装箱{
宽度：100%；
背景：#fff；
最小高度：100%；
位置：相对位置；
填充底部：105px；
}
#页脚{
背景：#eee；
左：0px；
右：0px；
底部：0px；
宽度：100%；
高度：171像素；
位置：绝对位置；
}   
#第1层{
位置：绝对位置；
位置：固定；
顶部：0px；
宽度：100%；
高度：50px；
z指数：1；
左侧填充：0px；
右边填充：0px；
背景：#fff；
文本对齐：右；方向：rtl；
} 
部门内容{
宽度：950px；
填充：10px 0px 20px 0px；
文本对齐：左对齐；
左边距：自动；
右边距：自动；
最小高度：100%；
}}


顶部导航
此处的内容页脚

不太清楚您想要的是什么，但是为了获得

响应式

设计，您应该使用

而不是固定宽度，即-

px

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

小提琴
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 */
}

侧注-在主体上设置不透明度
，将影响位于主体顶部的所有元素。最好在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
，这将超出容器。将这些设置为百分比
而不是固定宽度。此外，如果您不是出于使用目的而使用表
，那么使用它们也没有意义。将浮动
与%
宽度值一起使用（如果需要），而不是表格

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
}

如果您想要定向
，则需要执行以下操作：
@media (min-device-width: XXXpx) and (max-device-width: XXXpx) and (orientation:portrait) 
*/ or orientation:landscape */ {
     // styles
}

重要
在任何媒体
查询开始工作之前，您需要在标题中添加此信息
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>


是的，我正在尝试用上面的css代码设计响应页面，但不知道如何确定设备的宽度和高度。我应该删除哪些代码以及应该添加哪些代码，获取响应设计页面；）上面的css代码是浏览器样式设计的原始代码，我只想在媒体查询代码“media{…}”中添加代码。。。我还在头部添加了meta标记，但仍然不确定应该从原始css代码中删除哪些代码，应该添加哪些代码，这些代码对于所有添加的设备来说都是完美的