Css 使用流体网格布局定位dreamweaver cc中的不同设备

如何在Dreamweaver cc fluid grid布局中瞄准智能手机（480及以下）？如果你看下面的代码，主要是智能手机媒体查询（但所有查询都是如此），你会看到“li1和li2等”标签。在这些列表项中，我将图像用作链接。现在，对于平板电脑和更高版本，图像的大小是可以的，但对于智能手机视图，它们需要调整（特别是高度）。我无法区分不同的设备，这意味着在智能手机中进行的调整只会影响智能手机，而不会影响平板电脑或平板电脑，也不会影响智能手机或台式机等。我曾尝试使用css设计器来选择我要使用的媒体，但它始终作用于所有媒体

因此，一个百万美元的问题是，我如何在不影响所有其他设备的情况下，瞄准并调整我想要的设备的结构和图像高度

/* Mobile Layout: 480px and below. */

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
}
#div1 {
}
#mainheader {
margin-left: 0;
position: static;
height: auto;
width: 100%;
}
#navbarone {

}
#navbartwo {

}
#listiteams {
color: #FFFFFF;
text-align: center;
background-color: #9DC5D3;
}
#listiteamstwo {
text-align: center;
background-color: #9DC5D3;
color: #FFFFFF;
}
#navbutton {
``width: 100%;
}
#li1 {
width: 100%;
clear: both;
margin-left: 0;
}
#li2 {
width: 100%;
 clear: both;
margin-left: 0;
}
#navbuttontwo {
width: 100%;
}
#li3 {
width: 100%;
clear: both;
margin-left: 0;
}
#li4 {
width: 100%;
clear: both;
margin-left: 0;
}
#flads {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#mainheader {
position: static;
height: auto;
width: 100%;
margin-left: 0;
}
#navbarone {
}
#navbartwo {
}
#listiteams {
}
#listiteamstwo {
}
#navbutton {
width: 32.2033%;
}
#li1 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#li2 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#navbuttontwo {
width: 32.2033%;
}
#li3 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#li4 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#flads {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}


}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and                            Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
width: 100%;
max-width: 2000px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#mainheader {
position: static;
height: auto;
width: 100%;
margin-left: 0;
}
#navbarone {
}
#navbartwo {
}
#listiteams {
}
#listiteamstwo {
}
#navbutton {
width: 32.7731%;
}
#li1 {
width: 32.7731%;
margin-left: 0;
 clear: none;
}
#li2 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#navbuttontwo {
width: 32.7731%;
}
#li3 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#li4 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#flags {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

---

我对网页设计还比较陌生，但我的猜测是将另外一个类与li1和li2相关联，它们以某种方式仅连接到智能手机。我的平板电脑设置有问题，甚至无法生效。只有智能手机和台式机似乎能工作，这给我在中等大小的屏幕上制造了问题