响应式布局

响应式布局

一、媒体查询

<style>
      /*
        使用媒体查询
            语法： @media 查询规则{}
                  媒体类型：
                        all：所有设备
                        print：打印设备
                        screen：带屏幕的设备
                        speech：屏幕阅读器
      */

      /*
        媒体特性：
            width：视口宽度
            height：视口高度

            min-width：视口的最小宽度（视口大于指定宽度时生效）
            max-width：视口的最大宽度（视口小于指定宽度时生效）
      */

      /*
        @media (max- 500px){
            body{
                  background-color: #bfa;
            }
        }
      */

      /*
        样式切换的分界点（断点），即网页的样式会在这个点时发生变化
        一般比较常用的断点：
            小于768 超小屏幕 max-width=768px
            大于768 小屏幕   min-width=768px
            大于992 中型屏幕  min-width=992px
            大于1200 大屏幕  min-width=1200px

        and：并且
        ","：或
      */

      @media only screen and (min- 768px) and (max-992px){
            body{
                  background-color: #afb;
            }
      }

      @media (min- 768px),(max-992px){
            body{
                  background-color: #bfa;
            }
      }
</style>

二、Navigator对象

作用：移动端和网页端的显示效果不同时，可以使用Navigator对象

// 非移动端打开
if(!(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))) {
    //网页端代码
} else {
    //移动端代码
}