Question

我的网站存在快速响应问题。

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

这是自定义CSS代码：

＆＃13;

#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;
}

＆＃13;

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

有人可以帮我解决@media的问题吗？

Answer 1

@ user29769总而言之，如果您想优化240px宽度的网站版本，您可以： - 对齐文章中的文本（我检查了这个问题，你解决了问题，或者它确实起作用了） - 减小屏幕左右边缘与文章边框之间的边距 - 将搜索栏放在其他位置：标题下方，或者您也可以缩小搜索栏的大小，并将其与搜索和取消按钮保持在同一行。

总是在移动用户头上，应该有什么方便？另外，在Web浏览器（F12）上使用集成的Developper Webtool工具包，它可以帮助您完成很多事情： - 你可以在本地编辑实时CSS来尝试元素的一些东西 - 您可以直接从自适应视图调整屏幕的分辨率 - 禁用现有的css规则，显示计算的规则......它有很多帮助

最后，如果你想做一个干净的工作，媒体查询是谨慎使用的：选择了一些屏幕分辨率，并制作某种间隔级别： [宽度＆lt; 240,240＆lt;宽度＆lt; 460,460＆lt;宽度＆lt; 768等...]

通过这种方式，您可以进行媒体查询，并将正确的adptatives代码粘贴到其中。（有些人为每个分辨率制作一个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;
   }
}

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

使网站响应

1 个答案: