2017-04-27 34 views
-1

是更好地加載媒體查詢「@media」在HTML中,像這樣在html或樣式表中使用@media會更好嗎?

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

或CSS樣式表本身裏面?

@media (max-width: 800px) { 
... 
} 

從我所知道的是,無論是將負載無關,但如果條件適用纔會激活。有沒有更快和/或更好的?

編輯:我想爲我的網站製作一個全局樣式表,並且正在考慮爲不同的樣式表中的不同頁面分隔樣式,並且想知道哪一個樣式表具有更快的載入時間(使用html或CSS樣式表中的媒體)

+0

它總是很好地保留在'stylesheets'中,這是純粹基於意見的問題,根據上述原因將被投票關閉.. –

回答

0

它始終保持@media在CSS中。

使用HTML你也可以有不同的媒體不同的樣式:

+0

比其他人快嗎? –

0

也許你想看到的內部和外部CSS樣式表

內部CSS樣式表

之間的區別
<head> 
    <style type="text/css"> 
    @media (max-width: 800px) { 
    ... 
    } 
    </style> 
</head> 

外部CSS樣式表

<head> 
    <link rel="stylesheet" type="text/css" href="/support/style.css" /> 
</head> 

創建網站時應考慮內部和外部CSS。因此,它會影響你的頁面速度。

您可能需要閱讀googleinsight推薦:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

+0

其實我不是決定內部或外部的CSS樣式表。我實際上正在考慮爲我的網站創建一個全局樣式表,並且正在考慮添加另一個樣式表,並希望在單獨的樣式表中分離@media查詢,並想知道在相同樣式表或另一個樣式表中使用查詢是否會影響加載時間 –

+0

@william ..當然,它會影響加載時間..更多的全局文件,你有更多的時間來緩衝。儘可能多的,你應該少量的文件,它肯定會影響。這是基於我加速我的網站的經驗。另外,您可以查看以下內容:http://dyn.com/blog/how-we-improved-page-speed-by-cleaning-css-html-and-images/ – smzapp

0

CSS純粹基於代碼的可維護性和穩健的實現。試想一下,如果你想做到以下幾點:

@media (max-width:768px) { 
    .bob{} 
} 

40元帶班鮑勃 - 樣式表外,這將是可怕的處理。

相關問題