Html 使网页上的设计成为静态的

从一个基本的电子商务网站开始，我有一个很好的标题设计，带有徽标和一些导航。我注意到，当我按住ctrl+scrolling放大和缩小页面时，网站上的内容会四处移动，当我使用浏览器右上角的resize按钮并在浏览器边框周围拖动来调整web窗口的大小时，这一点也适用

当我这么做的时候，我的网站的设计和内容真的被放错了地方，被扭曲了。div和文本重叠等

我是否可以使内容完全不移动，从而使其处于静态状态？我想更具体地说，当您调整浏览器大小时，web内容只是隐藏在浏览器窗口已调整大小的地方

这是我的HTML/CSS：

#cartlist{
浮动：对；
右边距：353px；
利润上限：-50px；
左侧填充：300px；
}
#手稿{
字体系列：arial；
左边距：50像素；
利润上限：-51px；
}
#正文{
字体大小：14px；
}
#计数{
字体大小：12px；
利润上限：-28px；
}
#img a：悬停{
背景色：E3；
}
#img a{
填充顶部：25px；
右侧填充：150px；
左侧填充：5px；
垫底：5px；
}
#头部背景{
背景图片：url（bit.jpg）；
背景重复：重复-x；
利润上限：-10px；
左边距：-10px；
右边距：-10px；
垫底：1px；
}
#海德尔纳夫{
左边距：244px；
垫面：5px；
边缘底部：10px；
右边距：250px；
}
#李海德纳夫{
显示：内联；
字体系列：arial；
字体大小：11px；
左侧填充：0px；
右边填充：32px；
}
#校长李安{
文字装饰：无；
颜色：黑色；
}
#校长李娜：停下来{
颜色：adadad；
}
#海德洛戈{
左边距：280px；
右边距：680px；
边缘顶部：10px；
}
#导航{
左边距：240px；
右边距：675px；
利润上限：24px；
}
#李海军{
显示：内联；
字体大小：12px；
字体系列：arial黑色；
左侧填充：0px；
右边填充：0px；
}
#李娜{
文字装饰：无；
颜色：白色；
背景色：0F0F；
填充：8px 19px；
}
#导航李a:悬停{
背景色：333232；
}

SSDKUNGEN







Din kundvagn


kundvagnenär tom

一种可能的方法是设置页面的最小宽度。但是，这可能并将阻止页面响应

html, body {
    min-width: 1000px;
}

---

您还可以使用一个模板系统，比如Bootstrap，它允许您以一种以网格系统为中心的方式设计页面。这使您可以优雅地折叠布局，以获得更小的屏幕和分辨率。

我还没有测试您的代码，但这听起来像是响应能力方面的问题。如前所述，您可以使用Twitter引导之类的框架轻松实现这一点，或者使用百分比而不是px设置容器div的大小。您应该使用媒体查询为某些屏幕大小设置特定样式，例如：

@media screen and (min-width: 768px) {
   ...write your styles here
}

如果要隐藏内容，请使用 显示：隐藏； 在媒体查询的内部，当窗口达到某个屏幕大小时隐藏该元素。

---

此外，还应将所有正文内容包装在一个div中。此div的宽度/高度应使用像素，因为其余元素的百分比将基于该div的相对大小

所以当你放大缩小时，电子产品应该保持原样。。。但是，更改浏览器大小时，所有没有固定大小的图元都将开始移动。你必须确保你设置了每个元素的高度和宽度。虽然你的问题是有效的，但它确实太宽了。每个人都将开始发表意见。有大约100种方法可以做到这一点。退房用CSS隐藏div和内容会让你在搜索引擎优化方面受到惩罚。如果你把这个meta标签

改成

。。。只要将“宽度”值更改为“宽度”need@Chris这样设置最小宽度的问题在于，最终会完全破坏用户在各种设备上的可用性。如果有人正在使用平板电脑、手机，甚至是分辨率<1024px的旧电脑，网站将无法正确呈现。@Jdsfighter我同意。。。但OP说，“我更希望的是，当你调整浏览器的大小时，网页内容就隐藏在浏览器窗口被调整大小的地方。”不确定我是否误解了？：）@谢谢你！我查看了bootstrap，但它说它适用于移动设备，但也适用于pc？无论如何，我想我会坚持你在这期间给我的简单回答。比如说，是否可以使用与桌面版本相同的数据库为移动设备设计一个完整的其他页面？这样你就不必再摆弄像bootstrap这样的东西了？bootstrap是一种模板化的“引擎”。它适用于所有设备、所有屏幕等。您可以围绕其网格系统构建站点，它使您能够设计站点，以便在各种不同的设备和屏幕上优雅地显示。