我最近创建了这个WordPress site,并使用像素和边距来创建两个半透明内容框的布局。但是,我确信那些比我更有经验的人都知道这根本不是响应,也不是非常适合浏览器友好!所以我被建议换成百分比而不是像素,但无法确定从现有CSS开始的位置!
我需要制作一个包含5列的布局来实现这一目标吗?
有更简单的方法吗?
以下是我现有stylesheet
的链接任何帮助都将不胜感激,或者如果我忘记传递一些必要的信息,请告诉我!
答案 0 :(得分:0)
最简单的方法:
找到最宽的元素。它的宽度XXXpx
将成为您的新100%
。
查找px
值为YYYpx
的所有其他元素。(YYY/XXX * 100)px
。它的宽度现在为{{1}}。
直观浏览您的网站,确保一切正常。并非所有样式都是基于百分比的,所以你需要在这里和那里恢复一些。
答案 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/将为您提供其他说明和演示(尝试调整浏览器窗口大小或通过移动设备访问);)