hh54188/responsive-web-design-tutorial

[Book][Code] 第四章-媒体查询-顺序的重要性中的桌面优先没有提供代码

ScGPS opened this issue · 0 comments

ScGPS commented

第四章-媒体查询-顺序的重要性中的桌面优先没有提供代码
https://github.com/hh54188/responsive-web-design-tutorial/blob/master/%E7%AC%AC%E5%9B%9B%E7%AB%A0-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-%E9%A1%BA%E5%BA%8F%E7%9A%84%E9%87%8D%E8%A6%81%E6%80%A7/indiex3.html 这个是移动优先的Bug.

代码应该是

<!--
	1. 媒体查询--顺序的重要性--桌面优先
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>High Performance Web</title>
    <style type="text/css">
       html, body{
            height: 100%;
       }
       /* 规则1 */
       @media (max-width: 1024px){
            html{ background: blue; }
       }       
       /* 规则2 */
       @media (max-width: 800px){
            html{ background: green; }
       }
       /* 规则3 */
       @media (max-width: 320px) {
            html{ background: red; }
       }

    </style>
  </head>
  <body>
   
  </body>
</html>