CSS变量制作响应式网页

通常我们制作响应式网页就是 @media ，根据不同屏幕分辨率，页面做相应的调整。这样做会增加很多不必要的代码，使用CSS变量也可以达到我们的目的。


如上图所示：

旧方案

        #container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
        }

        @media all and (max-width:550px) {
            #container {
                display: grid;
                grid-template-columns: 200px;
                grid-template-rows: repeat(9, 200px);
            }
        }

CSS变量

        :root {
            --base-font-size: 30px;
            --columns: 200px 200px 200px;
            --row: 200px 200px 200px;
            --base-margin: 10px;
        }

        #container {
            display: grid;
            grid-template-columns: var(--columns);
            grid-template-rows: var(--row);
        }
        @media all and (max-width:550px) {
            :root {
                --columns: repeat(20px);
                --row: repeat(9, 80px);
                --base-font-size: 20px;
                --baes-margin: 15px;

            }
        }

注： 文中布局使用的是display:grid;，如需详细了解，请移步阮一峰老师CSS Grid 网格布局教程