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

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>

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

请帮忙

Answer 1

首先将这一行添加到 <head>

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

然后你必须学习一些东西 CSS media queries，没有一个简短的答案。当你 reading/learning/writing 时，你总是可以 post 提问。

Answer 2

让您 div 响应迅速，而不是使用 310 像素，而是使用像这样的百分比：

width: 100%

还有'shows everything small'是什么意思，请说明！

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

How to make my website open gracefully on mobile devices?

html

css

mobile

android

responsive-design