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

【问题标题】：How to make my website open gracefully on mobile devices?如何让我的网站在移动设备上优雅地打开？
【发布时间】：2015-02-23 01:45:01
【问题描述】：

我有这个代码：

<!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 时，它会显示所有小东西......我错过了什么？

请帮忙

【问题讨论】：

标签： android html css mobile responsive-design

【解决方案1】：

首先将此行添加到<head>

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

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

【讨论】：

【解决方案2】：

让你的 div 响应式，而不是像这样使用 310px 使用百分比：

width: 100%

您所说的“显示一切小事”是什么意思，请澄清！

【讨论】：