最近在研究RWD時看到一種說法
說是以mobile first的設計模式下
可以讓手機顯示的速度更快
所以應該盡量用min-width取代max-width
我想請問的是瀏覽器是在哪個階段進行螢幕寬度判定的
一般來說css會寫在head
如果是按照順序一行一行判定的話
在載入body之前整份css就載完了
也確定螢幕寬度要採用哪種樣式
例如
<html>
<head>
<style>
body{background-color:yellow;}
@media only screen and (min-width: 768px) {
body{background-color:red;}
}
</style>
</head>
<body>
</body>
</html>
在進入body之前不管手機還是電腦都載入了一樣多的東西
也各自確定了該顯示的顏色
這樣應該沒有所謂的效能問題阿
反之如果不是依序載入的話
模仿某些js放置的做法
把RWD的部分獨立出來放在body結束前
寫成下面這樣效能會不會更好
<html>
<head>
<style>
body{background-color:yellow;}
</style>
</head>
<body>
//something
<style>
@media only screen and (min-width: 768px) {
body{background-color:red;}
}
</style>
</body>
</html>