Question

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

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

这里的代码

＆＃13;

@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%;

}}

＆＃13;

<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>

＆＃13;

Answer 1

目前还不是很清楚，但是为了获得responsive设计，您应该使用%而不是固定宽度，即 - {{1} }。

如果这不是你所追求的，请创建一个px。

侧边注释 - 在身体上设置fiddle会影响位于其上方的所有元素。最好在opacity上使用rgba，而不是设置background。

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查询起作用之前，您需要在标题中使用此功能

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

未能如何将媒体查询应用于我的样式表

1 个答案: