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

【问题标题】：targeting different devices in dreamweaver cc using fluid grid layout使用流体网格布局在 Dreamweaver cc 中定位不同设备
【发布时间】：2014-04-29 16:31:30
【问题描述】：

如何在 Dreamweaver cc 流体网格布局中定位智能手机（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;
}

【问题讨论】：

标签： css media-queries dreamweaver

【解决方案1】：

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

【讨论】：