Question

我有这段代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
        div {
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200));
            width: 310px;
            height: 310px;
        }
        </style>
    </head>
    <body>
        <div>lol</div>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </body>
</html>

但是当我在手机上打开它而不是在全屏显示红色div时，它显示的一切都很小......我错过了什么？

请帮忙

Answer 1

首先将此行添加到<head>

中

<meta name="viewport" content="width=device-width, initial-scale=1">

然后你必须学习一些CSS media queries，没有一个简短的答案。您可以在阅读/学习/写作时随时发布问题。

Answer 2

让你做出响应，而不是像这样使用310px使用百分比：

width: 100%

你是什么意思'显示一切都很小'，请澄清！

如何让我的网站在移动设备上优雅地打开？

2 个答案: