css - 使用流体网格布局在 Dreamweaver cc 中定位不同的设备

Question

如何在 Dreamweaver cc 流体网格布局中定位智能手机(480 及以下)？如果您查看下面的代码，主要是智能手机媒体查询(但实际上是所有查询)，您会看到“li1 和 li2 等”。标签。在这些列表项中，我有用作链接的图像。现在对于平板电脑和更高版本的图像尺寸很好，但对于智能手机 View ，它们需要进行调整(特别是高度)。我无法区分不同的设备，这意味着在智能手机中进行调整只会影响智能手机而不影响平板电脑或平板电脑而不影响智能手机或台式机等。我尝试使用 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;
}

Answer 1

我对网页设计相当陌生，但我的猜测是将一个额外的类与 li1 和 li2 相关联，以某种方式仅连接到智能手机。我的平板电脑设置有问题，甚至没有生效。似乎只有智能手机和台式机可以工作，这在中型屏幕上给我带来了问题。