最近在研究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>