0

我最近创建了这个 WordPress网站，并使用像素和边距来创建两个半透明内容框的布局。但是，我确信那些比我更有经验的人都知道这根本不是响应式的，也不是非常友好的跨浏览器！所以有人建议我换成百分比而不是像素，但我不知道从哪里开始我现有的 CSS！

我需要制作一个 5 列的布局来实现这一点吗？

  • 第一列空白以创建左侧空白
  • 第二列包含较大的蓝色内容框
  • 第三列空白以在两列之间创建空间
  • 第四列较小的蓝色内容框
  • 第五列创建最右边的空白区域

有没有更简单的方法？

这是我现有样式表的链接

任何帮助将不胜感激，或者如果我忘记传递一些必需的信息，请告诉我！

4

2 回答 2

0

最简单的方法：

  1. 找到最宽的元素。它的宽度, XXXpx, 将是你的新的100%。

  2. 找到具有px值的所有其他元素，YYYpx。它的宽度现在将是(YYY/XXX * 100)px。

  3. 目视检查您的网站并确保一切正常。并非所有样式都是基于百分比的，因此您需要在这里和那里恢复一些样式。

于 2012-08-12T12:33:32.047 回答
0

如果您想要响应更快的东西，可以查看http://adapt.960.gs ;) 它很容易使用：

您必须首先添加 JS 文件：

<script src="js/adapt.min.js" type="test/javascript"></script>

然后 CSS（作为 JS 在用户浏览器上停用的后备）：

<link type="text/css" rel="stylesheet" href="css/960.min.css" />

最后一些 JS 行告诉浏览器切换 CSS 文件取决于浏览器宽度：

<script type="text/javascript">
  var ADAPT_CONFIG = {
    path: 'assets/css/',
    range: [
      '0px    to 760px  = mobile.css',
      '760px  to 980px  = 720.css',
      '980px  to 1280px = 960.css',
      '1280px to 1600px = 1200.css',
      '1600px to 1920px = 1560.css',
      '1920px           = fluid.css'
    ]
  };
</script>

然后，您将能够在 HTML 中使用标准网格，它会根据各种用途自行调整。http://adapt.960.gs/页面将为您提供额外的说明和演示（尝试调整浏览器窗口大小或通过手机访问）；）

于 2012-08-12T12:43:52.087 回答