[英]How to make UI more responsive for other screen sizes?
我有一個html頁面,其中有一個文本框(鍵入您的文本)和TextArea列表。 我需要在文本框中鍵入內容,然后單擊“添加”按鈕,以便文本框中的內容都進入我的TextArea列表。 我需要在文本框中輸入以下格式。
Name=Value
用戶將使用此文本框將“名稱值”對快速添加到該文本框正下方的列表中。 假設我們在上面的文本框中輸入Hello=World
並單擊添加,那么在下面的列表中,它應顯示為
Hello=World
而且,如果我們再次在同一文本框中鍵入ABC=PQR
,則在下面的列表中,它應該像這樣顯示,這意味着它應該繼續在其原始條目下方添加新的“名稱/值”對。
Hello=World
ABC=PQR
但是,如果語法不正確(例如不在“名稱=值”對中),則不應將任何內容添加到列表中,而應彈出該錯誤的輸入格式。 名稱和值只能包含字母數字字符。 我還有另外三個按鈕, Sort by name
Sort by value
, 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>
W3在響應式Web設計方面有許多資源:
http://www.w3schools.com/html/html_sensitive.asp http://www.w3schools.com/css/css_sensitive_intro.asp
在不使用PHP來檢測瀏覽器/用戶代理的情況下,您的響應式設計通常涉及確保網站更加流暢和流暢,允許更改瀏覽器寬度(如上面的第一個示例)和/或通過根據視口傳遞不同的樣式表CSS中的大小和媒體類型(第二個示例)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.