我有一个 html 页面，其中有一个文本框(键入您的文本)和 TextArea 列表。我需要在文本框中输入内容，然后单击“添加”按钮，以便文本框中的任何内容都进入我的 TextArea 列表。我需要在文本框中输入以下格式。
Name=Value
用户将使用此文本框将名称值对快速添加到该文本框下方的列表中。假设我们在上面的文本框中输入 Hello=World 并单击添加，那么在下面的列表中，它应该显示为
Hello=World
如果我们再次在同一个文本框中输入 ABC=PQR，那么在下面的列表中，它应该像这样显示，这意味着它应该在其原始条目下方不断添加新的名称值对.
Hello=World
ABC=PQR
但是，如果语法不正确，例如它不在“名称=值”对中，那么它不应该向列表中添加任何内容，而是显示弹出错误的输入格式。名称和值只能包含字母数字字符。我还有另外三个按钮按名称排序、按值排序和删除按钮。一旦我单击其中任何一个按钮，它就会使用名称或值对 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>
最佳答案
W3 拥有大量有关响应式网页设计的资源:
http://www.w3schools.com/html/html_responsive.asp http://www.w3schools.com/css/css_responsive_intro.asp
如果不使用 PHP 来检测浏览器/用户代理，您的响应式设计通常会涉及确保网站更加流畅和流畅，允许更改浏览器宽度(如上面的第一个示例)和/或根据具体情况提供不同的样式表关于 CSS 中的视口(viewport)大小和媒体类型(第二个示例)。
关于javascript - 如何使 UI 对其他屏幕尺寸的响应更加灵敏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32425915/