时间戳

首页 > 解决方案 > 响应式网页设计的缩放与媒体查询的好处

html - 响应式网页设计的缩放与媒体查询的好处

问题描述

我希望了解缩放设计而不是使用媒体查询进行响应式网页设计的好处。

我最近做了一个网站，我需要确保无论用户放大和缩小设计，设计都保持不变。我带来的解决方案相当简单：

<html>
    <body>
        <div id="container">    
            <h1>Hello World</h1>
            <div id="element"></div>    
        </div>
    </body>
</html>

html {
    font-size:1.1vw;
}

#container {
    width:50vw;
    margin: 0 auto;
}

h1 {
    font-size:3.125rem;
    font-family: sans-serif;
    text-align:center;
}

#element {
    width:25rem;
    height:15.63rem;
    background:green;
    margin:0 auto;
}

在上面的示例中，您也可以在 codepen 上看到，该代码允许您放大和缩小浏览器并调整浏览器大小，同时保持模拟的响应式设计。我看到了模仿，因为我相信仍然需要媒体查询来调整平板电脑和手机的设计。（顺便说一下，您可以将上面的 codepen 示例与此处不使用 REM 的示例进行比较）

现在通过这个例子，我想了解与传统的“媒体查询”方法进行响应式设计相比，使用“缩放”方法有哪些可能的优点和缺点（除了可能的浏览器兼容性问题）？我应该为我未来的所有网站项目考虑这种方法吗？

注意：正如评论中提到的那样，这将是小屏幕上的一个问题（手机就是一个例子），上面的问题提到手机和平板电脑可能仍然需要媒体查询来调整小屏幕的设计。在这方面，您对台式机和笔记本电脑有何想法。使用缩放作为台式机和笔记本电脑屏幕编码断点的替代方法？

标签： htmlcssresponsive

解决方案

推荐阅读