如何創建一個完全設備兼容的網站

基本上我想爲多個設備（桌面，iphone，ipad和其他瀏覽器的智能手機）創建網頁。我剛剛開始學習css3，學習css3媒體查詢非常混亂。

我讀了一些教程，下面的代碼是我想出的。如果我正在做這件事，或者是否有任何更正應該進行，有人能讓我知道嗎？如何創建一個完全設備兼容的網站

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 

    <!-- META --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="robots" content="noodp" /> 
    <title>Home</title> 

    <!-- CSS RESET --> 
    <link rel="stylesheet" type="text/css" href="reset.css" media="all" /> 

    <!-- TARGET SMARTPHONES --> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" /> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 321px)" /> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (max-width: 320px)" /> 

    <!-- IPADS --> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" /> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" /> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" /> 

    <!-- DESKTOP & LAPTOPS --> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1224px)" /> 

    <!-- LARGE SCREEN --> 
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1824px)" /> 

    <link rel="stylesheet" type="text/css" href="" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)" /> 

    </head> 
<body> 



</body> 
</html>

來源

2012-08-10 JaPerk14

我會將你的條件樣式表壓縮成一個。 – Blender 2012-08-10 04:51:13

會凝聚樣式表搞砸我瞄準的智能手機 – JaPerk14 2012-08-10 05:16:35

不，只需使用媒體查詢CSS語法即可。 – Blender 2012-08-10 05:17:15

您應該添加以下行，讓瀏覽器知道它應該如何適應設備屏幕上的內容。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這篇文章from html5rocks一定會幫助你。

來源

2012-08-10 05:19:30 RRikesh

這是一篇很棒的文章！ – 2012-08-10 08:15:43

擁有如此多的樣式錶鏈接並不是很好的做法。對於一個小型項目網站，您最多需要 2，但實際上您應該只有一個。設計你的一種CSS風格以適應頁面的寬度。隨着頁面變小，隱藏一些塊元素，一旦它變得足夠小以被認爲是電話寬度，那麼可能有一個移動樣式表。谷歌響應式設計，你會得到很好的例子。拿起你的鼠標，只是改變屏幕的寬度，看看頁面是如何反應的，使用開發人員工具查看哪些元素隱藏或不隱藏，然後嘗試自己複製它。你拿起了一個很好的時間學習，不得不說，網絡開發日益簡單，所有的工具都在那裏。

來源

2012-08-10 05:25:57 darethas

我通常在最大添加5個樣式表。一個用於重置，一個用於佈局，一個用於設置文本和圖像的樣式，一個用於表單，以及關於它的那些。如果我將這些類型的樣式表與設備專用的樣式表合併在一起，那對於一個小型項目來說太過分了嗎？ – JaPerk14 2012-08-10 05:33:03

爲什麼他們不能都在一個樣式表中？結賬html5樣板也是爲了方向，使用他們的樣式表，它結合了很多跨瀏覽器支持的最佳實踐。您不需要針對每種不同設備使用不同的樣式表，只需要將不同的CSS規則應用於頁面即可改變屏幕寬度 – darethas 2012-08-10 05:51:44

我通常會將樣式表組織成不同的類別。嘿，謝謝這幫了很多 – JaPerk14 2012-08-10 05:56:56

如何創建一個完全設備兼容的網站

回答

相關問題