Question

如何在Dreamweaver cc流体网格布局中定位智能手机（480及以下）？如果您查看下面的代码，主要是智能手机媒体查询（但实际上是所有查询），您将看到＆＃34; li1和li2等。＆＃34;标签。在这些列表项中，我有我用作链接的图像。现在对于平板电脑和更高版本，图像尺寸很好，但对于智能手机视图，它们需要进行调整（特别是高度）。我无法将不同的设备分开，这意味着在智能手机中进行调整只会影响智能手机而不是平板电脑或平板电脑而不是智能手机或台式机等。我已经尝试使用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联系起来，只能以某种方式连接到智能手机。我的平板电脑设置问题甚至没有生效。只有智能手机和桌面似乎能够在中型屏幕上为我创造问题。

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

1 个答案: