0

我的网站有响应问题。

主题是 Genbu，它已被定制为具有两个相等的侧边栏和更窄的边距。

这是自定义 CSS 代码：

#main {
padding: 10px;
}
.main-wrap {
float: left;
margin-left: 1rem;
margin-right: 21rem;
}
#sidebar-primary-wrap {
float: left;
margin-left: 1rem;
margin-right: -21rem;
width: 20rem;
}

#sidebar-secondary-wrap {
float: left;
margin-right: -20rem;
position: relative;
width: 20rem;
}

当我检查我的网站时，我遇到了 240x320、320x480 和 768x1024 设备的响应问题：http: //mattkersley.com/responsive/

有人可以帮我处理@media 的东西吗？

4

1 回答 1

1

@user29769 总而言之，如果您想优化 240 像素宽度的网站版本，您可以： - 对齐文章中的文本（我检查过，您解决了问题，或者从一开始就有效） - 减少边距在屏幕的左右边缘和文章的边框之间 - 将搜索栏放在其他地方：在标题下方，或者您也可以缩小搜索栏的大小并使其与搜索和取消按钮保持在同一行。

总是在移动用户的头脑中，什么应该是方便的？此外，在 Web 浏览器 (F12) 上使用集成的 Developper Webtool 工具包，它可以帮助您做很多事情： - 您可以在本地实时编辑 CSS 以尝试元素上的一些东西 - 您可以直接从自适应视图 - 禁用现有的 css 规则，显示计算出来的规则......它在很多方面都有帮助

最后，如果您想做干净的工作，请谨慎使用媒体查询：选择一些屏幕分辨率，并制作某种间隔级别：[width < 240, 240 < width < 460, 460 < width < 768等...]

这样，您可以放置​​媒体查询，并将正确的自适应代码粘贴到其中。（有些人每个分辨率制作一个 css 文件，我个人将所有媒体查询放在一个文件中，这是一个品味问题）

/* for all screens with a width lower than 240px */
@media screen and (max-width: 240px) {
   .search-toggle-active.menu-search input {
      margin-left: 30px !important;
   }

   .search-toggle-active.menu-search .search-field {
      width: 12rem;
   }

   .main-wrap {
      padding:0;
   }
}

我希望这个小小的帮助通知可以让你了解一些关于响应能力的基础知识。此外，我希望它可以帮助您解决您的问题

于 2015-04-10T06:40:54.517 回答