如何使 UI 对其他屏幕尺寸更具响应性？答案

【问题标题】：How to make UI more responsive for other screen sizes?如何使 UI 对其他屏幕尺寸更具响应性？
【发布时间】：2016-02-11 04:09:07
【问题描述】：

我有一个 html 页面，其中有一个文本框（键入您的文本）和 TextArea 列表。我需要在文本框中输入内容，然后单击“添加”按钮，以便文本框中的任何内容都进入我的 TextArea 列表。我需要在文本框中输入以下格式。

Name=Value

用户将使用此文本框将名称值对快速添加到该文本框下方的列表中。假设我们在上面的文本框中输入Hello=World并点击添加，那么在下面的列表中，它应该显示为

Hello=World

如果我们再次在同一个文本框中输入ABC=PQR，那么在下面的列表中，它应该显示如下，这意味着它应该继续在其原始条目下方添加新的名称值对。

Hello=World
ABC=PQR

但是如果语法不正确，比如它不在 Name=Value 对中，那么它不应该向列表中添加任何内容，而是显示一个错误输入格式的弹出窗口。名称和值只能包含字母数字字符。我还有三个按钮Sort by name、Sort by value 和Delete 按钮。一旦我单击这些按钮中的任何一个，它就应该使用名称或值对 TextArea 列表中的条目进行排序，并删除条目。现在我上面的所有东西都可以正常工作，没有任何问题。

这是我的jsfiddle。我需要使用纯 HTML、CSS 和 Javascript，我还不想使用任何库，因为我想保持简单，因为我还在学习。现在我想看看我们是否可以让 UI 更具响应性，就像 UI 应该根据正在查看的屏幕尺寸进行调整一样。例如，如果在手机（即 Android 或 iPhone）上查看，页面应自动调整以更好地呈现布局。这也适用于在桌面上调整浏览器的大小，以及在平板电脑上查看页面。

我需要对我的 CSS 或 HTML 进行哪些更改以使其更具响应性？我可以在这里做任何改进吗？由于我的 UI 非常简单，所以应该有一些简单的方法或我可以在此处进行一些改进。

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>

<style type="text/css">
.main{
    background:white;
    padding: 35px;
    border-radius: 5px;
}

#my-text-box {
    font-size: 18px;
    height: 1.5em;
    width: 585px;
}
#list{
    width:585px;
    height:300px;
    font-size: 18px;
}
.form-section{
    overflow:hidden;
    width:700px;
}
.fleft{float:left}
.fright{float:left; padding-left:15px;}
.fright button{display:block; margin-bottom:10px;}

html, body {
    height: 100%;
    font-family: "Calibri";
    font-size: 20px;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    background-color: #5C87B2;
}
</style>

<script language="javascript" type="text/javascript">
document.getElementById('add').onclick = addtext;
function addtext() {
    var nameValue = document.getElementById('my-text-box').value;
      if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue)){
        var x = document.getElementById("list");

        var option = document.createElement("option");
        option.text = nameValue;
        x.add(option);
    }
    else
        alert('Incorrect Name Value pair format.');
}
document.getElementById('btnDelete').onclick = deleteText;
function deleteText(){
    var myList = document.getElementById('list');
    var i;
    for (i = myList.length - 1; i>=0; i--) {
    if (myList.options[i].selected) {
      myList.remove(i);
    }
  }
}

document.getElementById('sortByValue').onclick = sortByValue;
function sortByValue(){
    var myList = document.getElementById('list');
    var values = new Array();
    for (var i=0;i<myList.options.length;i++) {
        values[i] = myList.options[i].text;
    }
      values.sort(function(a, b){
            if(a != "" && b != ""){
                return a.split('=')[1].localeCompare(b.split('=')[1])
            } else {
                return 0
            }
        });

   clearList(myList);
   fillList(myList, values);
}
document.getElementById('sortByName').onclick = sortByName;
function sortByName(){
    var myList = document.getElementById('list');
    var values = new Array();
    for (var i=0;i<myList.options.length;i++) {
        values[i] = myList.options[i].text;
    }
      values.sort(function (a, b){
            if(a != "" && b != ""){
                return a.split('=')[0].localeCompare(b.split('=')[0])
            } else {
                return 0
            }
        });

    clearList(myList);

    fillList(myList, values);
}

function clearList(list) {
    while (list.options.length > 0) {
        list.options[0] = null;
    }
}

function fillList(myList, values){
    for (var i=0;i<values.length;i++) {
        var option = document.createElement("option");
        option.text = values[i];
        myList.options[i] = option;
    }
}
</script>

</head>

<body>
<div class = 'main'>
    <h3>Test</h3>

    <label for="pair">Type your text</label></br>
    <div class="form-section">
        <div class="fleft">
            <input type='text' id='my-text-box' value="Name=Value" />
        </div>
        <div class="fright">
            <button type="button" id='add' onclick='addtext()'>Add</button>
        </div>
    </div>
    <label for="pairs">Name/Value Pair List</label></br>
    <div class="form-section">
        <div class="fleft">
           <select id="list" multiple></select>
        </div>
        <div class="fright">
            <button type="button" id='sortByName' onclick='sortByName()'>Sort by name</button>
            <button type="button" id='sortByValue' onclick='sortByValue()'>Sort by value</button>
            <button type="button" id='btnDelete' onclick='deleteText()'>Delete</button>
            <button type="button">Show XML</button>
        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

您能否从源代码中删除</br>s，因为我发现很难集中精力处理其他问题。隧道视野。
完成，从源中删除所有</br>s。

标签： javascript html css responsive-design

【解决方案1】：

W3 有很多关于响应式网页设计的资源：

http://www.w3schools.com/html/html_responsive.asp http://www.w3schools.com/css/css_responsive_intro.asp

如果不使用 PHP 来检测浏览器/用户代理，您的响应式设计通常会涉及确保网站更加流畅和流畅，允许更改浏览器宽度（如上面的第一个示例）和/或交付不同的样式表，具体取决于CSS 中的视口大小和媒体类型（第二个示例）。

【讨论】：