Question

我正在尝试为我的网页制作类似Windows 8的界面。我已经创建了充当瓷砖的文章，并且有一个随机的生成器，使得瓷砖变小或变大。我试图使它们看起来像在列中取决于屏幕的宽度。当我改变屏幕宽度时，瓷砖似乎没有正确间隔，这让我疯狂。我是css和jquery的新手，所以我仍然在学习并且总是乐于学习新的做事方式。我非常感谢有关此列和间距问题的一些帮助。

注意：我的瓷砖通常有图片，之后我更改了代码只是为了显示为彩色瓷砖。现在他们并不总是在展示，但我会解决这个问题。

例如：每列的宽度应为一个双盒或两个单盒。并且取决于屏幕宽度...如果越大，显示的列越多，显示的列数越少。

这是我目前的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="Script/jquery.lorem.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var colors = ["#2672ec", "#00a300", "#97009f", "#094db5", "#da532c", "#af1a3f", "#613cbc", "#008ad2"];
            var doubleBoxFlag = [true, false, false, false, false, false];
            var pictures = ["Images/1.jpg", "Images/2.jpg", "Images/3.jpg", "Images/4.jpg", "Images/5.jpg", "Images/6.jpg", "Images/7.jpg", "Images/8.jpg", "Images/9.jpg", "Images/10.jpg", "Images/11.jpg"];
            var defaultClass = '.box';



            for (var i = 0; i < Math.floor((Math.random() * 64) + 34) ; i++)
            {
                var rand = Math.floor(Math.random() * pictures.length);
                var boxRand = Math.floor(Math.random() * doubleBoxFlag.length);
                var currentClass = defaultClass + i;
                var currentClassJ = 'box' + i;
                //For picture tiles:
                //$("#Interface").append("<article class=" + currentClassJ + " " + "style='background-image: url(" + pictures[rand] + ")" + "'><span>" + i + "</span>");

                //For Color Tiles:
                $("#Interface").append("<article class=" + currentClassJ + " " + "style='background-color:" + colors[rand] + "'><span>" + i + "</span>");

                if (doubleBoxFlag[boxRand]) {
                    $(currentClass).css("width", "374px");
                    $(currentClass).css("padding-right", "20px");
                }
                else
                    $(currentClass).css("width", "187px");

                $(currentClass).css("height", "187px");
                $("article").css("float", "left");
                $("article").css("margin", "11px");
                $("span").css("display", "block");
                $("span").css("padding-top", "167px");
                $("span").css("padding-left", "12px");


            }
            //if (screen.width <= 480)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1000 && screen.width <= 1799)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1800)
            //    $("#Interface").css("width", "470px");
            // This line below should be adding the random word to each of the articles
            $('span').lorem({ type: 'words', amount: '1', ptags: false });


        });

    </script>
</head>
<body background = "Images/bg.png">
    <div id="Interface"></div>
</body>
</html>

Answer 1

现在我了解您的问题，我建议您开始使用css media queries。基本上有三个原因：

这是解决问题的一种方法（duh）
当谈到现实世界时，这种脚本化的调整和计算将会变慢。
它更加清晰无痛。

根据确定的屏幕尺寸制作包含所需规则的css文件，然后再次为要匹配的屏幕尺寸执行此操作。记住你可以使用所有css技巧来确定一个确定的屏幕尺寸来实现外观和效果。感觉你想要，因为媒体查询下的规则不会弄乱你的css在其他屏幕尺寸。

毕竟，将所有样式表组织在一个文件中，并将它们包装在适当的媒体查询中。

试一试，你会爱上它。

是的，至少在IE的三个早期版本中支持它，我想。

将HTML元素分隔成具有适当间距的列（JQuery和CSS）

1 个答案: