HTML5第十二天学习内容( 流式布局 / 响应式布局 / media媒体查询 )

                     1️⃣ 流式布局: 本质上是百分比布局 (百分比是基于父级的大小) (外接  .css文件)

                     2️⃣ 响应式布局 : 根据浏览器宽度不同使用不同的布局风格(根据缩放浏览器窗口 内容进行变化) (外接  .css文件)

                           例 : 

                              <!--大于 1000px-->

                             <link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="css/base03.css"/> 

                            <!--小于 600px-->

                           <link media="screen and (max-width:600px)" rel="stylesheet" type="text/css" href="css/base01.css"/>

                          <!--大于 600px 小于 1000px-->

        <link media="screen and (min-width: 600px) and (max-width: 1000px)" rel="stylesheet" type="text/css" href="css/base02.css"/>

                     3️⃣  media媒体查询:  就是来查询浏览器宽度和高度  (外接  .css文件)

                           例  : 

                                 /*大于 1000px*/

                               @media only screen and (max-width: 1000px) {

.                                          .oneDiv{

                                           background: red;

                                         }

                            }

                               /*小于 600px*/

                         @media only screen and (min-width: 600px) {

                                      .oneDiv{

                                     background: yellow;

                                    }

                       }

                          /*大于  600*px    小于100px */

                    @media only screen and (min-width: 600px) and (max-width: 1000px) {

                                  .oneDiv{

                                  background-color: greenyellow;

                                 }

                 }