Question

www.thames.ikas.sk 如果你将浏览器的大小调整为屏幕的一半宽度...为什么我的右边有白色条纹？为什么我的HTML和身体没有全宽？浏览器全宽时没有问题。平板电脑或手机也有问题。请帮忙

Answer 1

您的设计要求屏幕宽度至少为960像素。在此宽度下，即使视口小于960px宽，一些元素仍然被迫使用此空间。

尝试将您的设计更改为不使用此强制宽度，或者更糟（在我看来）确保背景也伸展到两侧。

Answer 2

#header_inner, #main_body_inner, #navigation_inner, #footer_inner {
width: 960px;
}

这就是你的问题;）

您应该向template.css添加一些CSS/Media Queries，例如

@media (max-width: 960px)
#header_inner, #main_body_inner, #navigation_inner, #footer_inner {
width: 100%;
}

这应该进入模板的index.php以设置viewport条件：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

请阅读这两个链接，我希望谷歌翻译链接正常工作;）

编辑：任何固定宽度为320px或更高的内容都应该使用@ media-query进行处理，只是为了让它可以与移动设备/平板设备配合使用，如果你想让你的页面处于“响应式样式”中。

检查.logo类（宽度：634px）

通常你最终得到：

/* Default wide-screen styles */

@media (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}

@media (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}

@media (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}

@media (max-width: 320px) {
/* styles for iPhone/Android portrait */
}

@media (max-width: 240px) {
/* styles for smaller devices */
}

Joomla模板（右侧白色条纹）

2 个答案: