Question

我已经建立了一个网站，它在所有浏览器的计算机上查看时都能正常工作。但是当我尝试在手机上查看它时，它看起来很糟糕。标题在顶部是正常大小，但所有页面文本都在屏幕的最左侧对齐，每三个单词都有一个新行。我的网站的结构是我在中间有一个包含所有内容的div，每边有300px的边距。为什么会这样？我该如何解决？

Answer 1

您所指的被称为响应式设计。

What is Responsive Web Design? 响应式网页设计是为了创建在所有设备上都很好看的网站。响应式网页设计不是程序或JavaScript。响应式网页设计是移动设备必备的。

Responsive Design

从tutorial引用，以下是响应式设计的3个简单步骤：

步骤1.元标记

<html>
<head>
    <script>
        function setHeader(){
            var d1 = new Date("7/15/15 11:57"); // change your dates here
            var d2 = new Date("7/15/15 11:58"); // change your dates here
            var header = document.getElementById("header");
            if(d1 > d2){
                header.innerHTML = "Welcome to the " + <%=formFields.getDisplayValue("programName")%> + " Registration Site."
            } else {
                header.innerHTML = "Welcome to the " + <%=formFields.getDisplayValue("programName")%> + " Registration Site, is now closed. "
            }
        }
    </script>
    </head>

<body onload="setHeader()">
    <h1  id="header" class="loginhead"></h1>
</body>
</html>

第2步.HTML结构

HTML Structure

第3步。媒体查询

Media Queries 1

此处为Demo，此处为source of the demo。

Answer 2

在我看来，你有一个响应式设计问题。查找媒体查询。将它们添加到您的站点并配置您的元素。尝试使用％和em进行更多操作。

Answer 3

创建自适应网站的常用框架是Bootstrap。

如何在javascript if语句中添加多个条件

3 个答案: