css - 多列 css http ://jsfiddle.net/efLfL/

Question

我想创建可以满足我需求的 css。

如果屏幕尺寸是 320px 那么 (左边距 10px) - 300 固定列 - (右边距 10)

如果屏幕尺寸是 810px 那么 (左边距 10px) - 480 新列 - (margin 10) - 固定列 300 + (margin 10)

如果屏幕尺寸为 940px，则 10 - 新列 300 - 10 - 新列 300 - 10 - 固定列 300 - 10

如果屏幕尺寸为 990px​​，则 10 - 新列 325 - 10 - 新列 325 - 10 - 固定列 300 - 10

如果屏幕尺寸为 1250 像素，则 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10

如果屏幕尺寸为 3840 像素，则 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10 - 新列 300 - 10

你能帮我完成这个吗？

提前致谢。

Answer 1

这可以使用媒体查询来完成

 @media (max-width:your width)
{

   //your width specific CSS Here
}