html - Joomla 模板（右侧白色条纹）

Question

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

Answer 1

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

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

Answer 2

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

那是你的问题 ;）

你应该添加一些CSS/媒体查询到你的 template.css 例如

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

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

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

请阅读这两个链接，我希望谷歌翻译链接有效；）

编辑：任何具有 320 像素或更大宽度的固定宽度都应使用@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 */
}