将css修改为百分比而不是像素

时间:2012-08-12 12:02:30

标签: css wordpress percent-encoding

我最近创建了这个WordPress site,并使用像素和边距来创建两个半透明内容框的布局。但是,我确信那些比我更有经验的人都知道这根本不是响应,也不是非常适合浏览器友好!所以我被建议换成百分比而不是像素,但无法确定从现有CSS开始的位置!

我需要制作一个包含5列的布局来实现这一目标吗?

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

有更简单的方法吗?

以下是我现有stylesheet

的链接

任何帮助都将不胜感激,或者如果我忘记传递一些必要的信息,请告诉我!

2 个答案:

答案 0 :(得分:0)

最简单的方法:

  1. 找到最宽的元素。它的宽度XXXpx将成为您的新100%

  2. 查找px值为YYYpx的所有其他元素。(YYY/XXX * 100)px。它的宽度现在为{{1}}。

  3. 直观浏览您的网站,确保一切正常。并非所有样式都是基于百分比的,所以你需要在这里和那里恢复一些。

答案 1 :(得分: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/将为您提供其他说明和演示(尝试调整浏览器窗口大小或通过移动设备访问);)