HTML自動調整到

-2

我剛剛完成設計的接口的移動應用程序的大小我用所有的屏幕是 750瓦特由1334H 的問題是其顯示到大的應用程序的測試屏幕上HTML自動調整到

我需要自動適合所有屏幕上的設計又不失這裏的任何分辨率是CSS代碼

.username { 
 
    background: #397ba5; 
 
    border: none; 
 
    width: 286; 
 
    height: 82; 
 
    color: white; 
 
    font-size: 24; 
 
} 
 
.password { 
 
    background: #397ba5; 
 
    border: none; 
 
    width: 283; 
 
    height: 81; 
 
    color: white; 
 
    font-size: 24; 
 
} 
 

 
.memberlogin { 
 
    background-color: #fc4988; 
 
    border: none; 
 
    width: 472; 
 
    height: 85; 
 
    color: white; 
 
    font-size: 40; 
 
    font: BOLD; 
 
}

<html> 
 
<head> 
 
<title>Untitled-1</title> 
 
<link rel="stylesheet" href="http://infinityfreight.net/style.css"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
</head> 
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
<!-- Save for Web Slices (Untitled-1.psd) --> 
 
<table id="Table_01" width="640" height="1136" border="0" cellpadding="0" cellspacing="0"> 
 
\t <tr> 
 
\t \t <td colspan="7"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_01.gif" width="750" height="508" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" rowspan="4"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_02.gif" width="324" height="264" alt=""></td> 
 
\t \t <td colspan="3"> 
 
\t \t \t <input type=text class="username"></td> 
 
\t \t <td rowspan="8"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_04.gif" width="140" height="826" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_05.gif" width="286" height="49" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2"> 
 
\t \t \t <input type=password class="password"></td> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_07.gif" width="3" height="133" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_08.gif" width="283" height="52" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2" rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_09.gif" width="138" height="124" alt=""></td> 
 
\t \t <td colspan="4"> 
 
\t \t \t <input type="submit" value="SIGN IN NOW" class="memberlogin"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="4"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_11.gif" width="472" height="39" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_12.gif" width="130" height="438" alt=""></td> 
 
\t \t <td colspan="3"> 
 
\t \t \t <a href="/"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_13.gif" width="318" height="29" alt=""></a></td> 
 
\t \t <td colspan="2" rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_14.gif" width="162" height="438" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_15.gif" width="318" height="409" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="130" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="8" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="186" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="124" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="159" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="3" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="images/spacer.gif" width="140" height="1" alt=""></td> 
 
\t </tr> 
 
</table> 
 
<!-- End Save for Web Slices --> 
 
</body> 
 
</html>

來源

2016-11-24 NICK

DId沒有解決問題 – NICK

自適應設計是一種普遍preferr但你可以做我想要的東西

<meta name="viewport" content="width=320" />

其中320是視圖中的像素數目（與設備無關）。

見http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

來源

2016-11-24 17:42:27

沒有解決問題 – NICK

-1

使用CSS規則@media。還有，當最小屏幕寬度爲X.

@media screen and (min-width: 480px) { 
    .username { 
     background: #397ba5; 
     border: none; 
     width: 286; 
     height: 82; 
     color: white; 
     font-size: 24; 
    } 
    .password { 
     background: #397ba5; 
     border: none; 
     width: 283; 
     height: 81; 
     color: white; 
     font-size: 24; 
    }  

    .memberlogin { 
     background-color: #fc4988; 
     border: none; 
     width: 472; 
     height: 85; 
     color: white; 
     font-size: 40; 
     font: BOLD; 
    } 
}

來源

2016-11-24 17:42:39 driconmax

添加@media屏幕時CSS停止工作並且（min-width：480px） – NICK

我將它放在代碼上並工作，因此請檢查您做錯了什麼，以及檢查如何使用@media。我在回答中提供了一個鏈接 – driconmax

非常感謝你的朋友，但是如果你看看HTML代碼，每張圖片都有自己的寬度和高度，除了我使用CSS的輸入。注意我一直在使用Adobe Photoshop指定者並剪切它們。每次我完成設計時，我都有這個問題的解決方案 – NICK

爲了使您的應用程序重新調整你需要使用媒體查詢每個屏幕尺寸，你可以編寫風格使用。媒體查詢的一個例子是這樣的，

最小寬度

@media only screen and (min-width: 330px) {...}

這裏是實際上的意思是：

「如果[device width]大於或等於[specified #]，然後做{...}」

所以如果實際的「device width」是320px這個條件將返回false。

「如果320px大於或等於330px，然後做{...}」

MAX-WIDTH

@media only screen and (max-width: 330px) {...}

轉換爲：

「如果[device width]是小於或等於到[specified #]，然後做{...}「

所以在此基礎上第二個例子，如果「device width」是320px條件爲真：

「如果320px小於或等於330px，然後做{...}」

替代 - 使用Twitter的引導

我最喜歡的方式來處理髮展響應應用程序是使用Twitter Bootstrap

Bootstrap來自移動友好和響應的框。 Bootstrap是一個免費且開源的前端網頁框架，用於設計網站和網頁應用程序。它包含HTML和基於CSS的設計模板，用於排版，表格，按鈕，導航和其他界面組件，以及可選的JavaScript 擴展。

你可以找到Twitter Bootstrap here

而且你的代碼沒有定義，高度和寬度正常。請參閱更新的代碼。

.username { 
    background: #397ba5; 
    border: none; 
    width: 286px; 
    height: 82px; 
    color: white; 
    font-size: 24; 
} 
.password { 
    background: #397ba5; 
    border: none; 
    width: 283px; 
    height: 81px; 
    color: white; 
    font-size: 24; 
} 

.memberlogin { 
    background-color: #fc4988; 
    border: none; 
    width: 472px; 
    height: 85px; 
    color: white; 
    font-size: 40; 
    font: BOLD; 
}

你也可以使用百分數。

width: 20%;

好吧，我明白了。你沒有基本的css知識。我會試着再給你一個例子。您沒有正確實施媒體查詢。這是一個例子。

媒體查詢不包裝所有的CSS。你制定CSS規則。然後，當某些規則需要根據不同的屏幕大小進行更改時，您可以創建一個媒體查詢並刪除需要更改的特定規則。這是一個例子。

我將更改屏幕尺寸爲div的寬度，該尺寸小於100px請特別注意px。這是我們如何指定尺寸。在很多情況下 - 但並非所有情況下我們都使用px。

在這個例子中，我們創建了.div1，然後我們創建一個媒體查詢，並將類別div1放在其中，寬度不同。

.div1 { 
    width: 300px; 
    background: red; 
    color: black; 
} 

@media only screen and (max-width: 330px) { 
.div1 { 
    width: 100px; 
    background: red; 
    color: black; 
} 
}

這

實施例之一的輸出。默認的css輸出，

例二。媒體查詢屏幕尺寸在100px下。

注意div的寬度根據屏幕的大小而不同。

來源

2016-11-24 17:43:53 wuno

偉大的解釋，但我是新來的，我不知道該怎麼做，你能解決我的代碼，我知道你是怎麼做到的嗎？ – NICK

你應該編寫代碼並完成工作..不是我們的....這不是教給初學者如何編程的頁面。請檢查規則。 – driconmax

@Nick有很多事情可以讓你的應用程序工作，我們任何人都不可能用一點代碼爲你做。我們只能回答一些小問題。您沒有正確定義元素的寬度和高度。你需要回到基礎知識並花時間去學習。當你有另一個問題格式正確，我們會幫助你。嘗試提出一些小問題，而不是像這樣廣泛的問題，如何讓我的整個網站以某種方式工作。讓我知道我是否可以爲你的夥伴做其他事情。直到然後接受我的答案並用它來學習。也使用谷歌。 – wuno

HTML自動調整到

回答

相關問題