HTML5 HTML5響應式網頁設計

我正在關注Lynda.com YouTube上的其中一個視頻以製作響應式設計網頁。總之，我有2個CSS文件，一個用於標準全局風格，另一個用於較大尺寸的屏幕。HTML5 HTML5響應式網頁設計

<!Doctype html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale = 1.0"/> 
    <title> Lynda.com | Creating a Responsive Web Design</title> 
    <link rel="stylesheet" type="text/css" href="first.css" /> 
    <link rel="stylesheet" type="text/css" href="firstLarge.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-depth:500px)" href ="firstSmall.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-depth:800px)" href ="firstMedium.css" /> 
    <!--[if lt IE 9]> 
     <script src - src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head>

這是我的html文件的開始。所以我關心和困惑的部分是第二個鏈接rel行。當我擴展我的Chrome瀏覽器時，「firstLarge.css」中沒有任何內容適用。就好像CSS甚至不存在。

我只是有點困惑，如何得到這個工作。任何類型的幫助將不勝感激。謝謝。

來源

2016-10-16 Henry Fok

沒有看到這些文件包含什麼，幾乎不可能說什麼。 – JJJ

...什麼是最大深度？ – AA2992

@AnkithAmtange哎呀謝謝你的發現。它應該是寬度以及謝謝你！ –

-1

因此，對於響應式設計，您不需要1000張css工作表查找媒體查詢。唯一需要多個樣式表的時間是當我有一個允許用戶覆蓋網站的移動版本以查看桌面版本的按鈕時。

只要在內容指示的時候進行媒體查詢，當你縮小屏幕尺寸時，也可以使用大於1920px的大屏幕尺寸。

對不起，我會爲你編碼的例子，但只是在我的手機。

但願雖然有幫助！

來源

2016-10-16 08:02:45 Allan

-1

如果您是UI開發人員的新手，我會建議您徹底學習CSS，您應該瞭解媒體斷點。

請檢查下面的鏈接，以供參考如何使用媒體查詢。

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

我建議標準斷點如下使用。

@media only screen and (min-width: 0) and (max-width: 480px) { 
    /* css for mobile */ 
} 

@media only screen and (min-width: 481) and (max-width: 766px) { 
    /* css for tablet */ 
}

來源

2016-10-16 08:15:31 Devang

感謝所有的答案傢伙。我最終解決了自己的問題。這可能是我昨天晚上很累的那種愚蠢的一種。這只是我在「firstLarge.css」中使用的類名在first.html中不匹配。

我在HTML中使用 <div class="informationContainer"> 和「firstLarge.css」之稱 .information_container 。

謝謝你們！

來源

2016-10-16 15:38:45

HTML5 HTML5響應式網頁設計

回答

相關問題