鏈接標記和媒體屬性

我正在通過關於響應式設計（lynda dot com）的培訓視頻。教師演示瞭如何將html文檔鏈接到具有特定屏幕大小格式的2個不同的外部css文件。舉一個例子，他寫的語法爲中等大小的屏幕如下：鏈接標記和媒體屬性

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css" />

媒體屬性屬性是雙引號。但是，當我在Dw CS6中做到這一點時，html文件不會鏈接到它。然後，我將它改爲單引號，它工作，但我不知道爲什麼。任何人都可以解釋嗎？

來源

2015-11-23 CP Creative Studio

你確定引號是簡單的，直的報價？ –

該視頻顯示雙引號。導師還說他正在輸入雙引號。爲了html爲什麼不能連接起來，我正在絞盡腦汁。最後我嘗試了單引號並保存了文件。 Dreamweaver立即顯示這個CSS文件被鏈接。然後我刷新了瀏覽器，並且所有的工作都像它應該的那樣。 –

是的，但我的問題是，如果你確定你在源代碼中輸入了「'」'而不是花哨的聰明引號'「」''等。 –

從技術上講，您甚至不需要在鏈接標記中指定media=""。

所以，換句話說：

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css" />

可以改爲：

<link rel="stylesheet" type="text/css" href="css/screen_layout_medium.css" />

而且因爲你有一個CSS文件鏈接，只需添加這在那個CSS文件底部：

@media only screen and (min-width:501px) and (max-width:800px) { 
    #id { } 
    /* Add your IDs and Classes here that you want changed for this size screen */ 
}

來源

2015-11-23 21:07:28 Michael

儘管這樣效率不高，瀏覽器將始終需要下載該css文件，即使其內容未被使用。 –

如果他/她只有一個css文件並將'@ media'查詢放在該文件的底部，這將是一種改進，或更有效。如果他/她擁有多個css文件，則需要更長的時間，因爲瀏覽器必須讀取多個不同的css文件而不是一個。 – Michael

鏈接標記和媒體屬性

回答

相關問題