Question

*
{
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #FFAF0A;
    }

#wrapper {
    width: 100%;
    height: 1000px;
}

#header {
    background-color: #222222;
    height: 120px;
    width: 100%;
}

#body {
    width: 100%;
    height: 700px;
}

#leftNav {
    float: left;
    width: 15%;
    height: 700px;
    background-color: #F6F6F6;
}
#content {
    width: 85%;
    float: right;
    height: 700px;
    background-color: white;
}

#footer {
    background-color: #222222;

    height: 100px;
}

大家好，这是我的网页布局。这是响应吗？如果不是，我怎么能让它响应。谈到图形，我如何处理像素？将它们转换为百分比？

提前谢谢。

Answer 1

'响应'需要考虑更多的事情，而不是以可用总数的百分比来表示高度和宽度。它应该包括css @media查询，应考虑针对不同屏幕宽度调整大小的图像，还应考虑设备位置的图像布局和尺寸，如ipad垂直或水平。

这个“响应式”术语仍然没有明确定义，我可以说上面写的样式表没有响应。

修改

由于您是在Dreamweaver中执行此操作，因此它具有您需要为响应式Web滚动执行的所有操作。只需按照创建响应式网页的同时开始一个新项目。此外，Dreamweaver在编辑器底部有非常好的界面，其中包含桌面，移动设备和表格设备图标，可显示您的代码在每种类型的设备中的外观。您还应该具有jquery-mobile的灵活性，因为它包含所有捆绑的东西，更有趣的是，它为您的所见即所得编辑编写了简单的CSS。（虽然它包含很多样式表，但除了你感觉他们的要求）。

Answer 2

您还可以使用css3 @media查询根据页面大小包含或排除项目。

实验的一个好方法是缩小或扩展笔记本电脑桌面上的浏览器。

有关详情，请参阅..

Css Media queries

其他人对于％是正确的。当您使用declare％而不是静态px维度时，您将设置元素以适应其父元素的某个％。

Answer 3

你的css仍然会像液体布局一样。它将在非常大的屏幕上打破。您希望在960px上创建网站。所以你必须给css包装如下所示：

#wrapper {
    width: 960px;
    max-width:100%;
    height: 1000px;
}

由于max-width:100%你的包装器会在小屏幕中自动表现为液体格式。其他子元素也可以使用％value。

现在有一个问题如何将修复px值转换为％或em。

所以这是执行此操作的简单规则。

em值的

： 子宽度/父宽度= em

对于％值： （子宽度/父宽度）x100 =％

示例：

#wrapper width is: 960px;
#leftNav width is: 200px;
#content width is: 750px;

现在你必须遵循上面提到的规则：

#leftNav {
    float: left;
    width: 20.83333333333333%; /* (200/960)x100 */
    height: 700px;
    background-color: #F6F6F6;
}

#content {
    width: 78.125%; /* (750/960)x100 */
    float: right;
    height: 700px;
    background-color: white;
}

您可以使用此规则以百分比或em来定义字体大小。

响应式网页设计布局代码

3 个答案: