适配不同大小浏览器——固定排班

Posted 2020-07-13 夜未央leo

      此文介绍的是缩小浏览器，排班不随浏览器窗口大小变化，如果需要排班随浏览器变化，使用bootstrap会更好，今天要介绍的是固定排班

      加入JS代码：

      

  <script language="javascript">
        function readyPage() {

             if (screen.width >= 1600){
                $(".content_container").width(1600);
            }

             else if ((screen.width >= 1400)&& (screen.width < 1600)){
                $(".content_container").width(1400);    //此分辨率下你需要的操作

            } 

              else if ((screen.width >= 1024)&& (screen.width < 1400)){
                $(".content_container").width(1024);    //此分辨率下你需要的操作

            } 
            
              else if ((screen.width >= 980)&& (screen.width < 1024)){
                $(".content_container").width(980);    //此分辨率下你需要的操作
            }
            
              else {
                $(".content_container").width(800);     //这个分辨率下你的操作
            }

        }
    </script>

View Code

 

    然后再body中，引入js，加入代码：  onload="readyPage()"

 

    还有一个方法，浏览器缩小的时候，排班不会随着他缩小而变化太大，但是，目前尝试，是能做到，在本机上全屏展示喔，在其他机器上，可能需要拖动进度条才能看到全屏.

    content是我们需要展示的内容，在content前加一个父级div，如下：

    <div class="container">

         <div class="screenAdaptive">

                content

        </div>

   </div>

   对container的宽度，做处理如下：

     .container {

          width:100%;

          height:100%;

          margin:0 auto;

       }  

    对content的父级，指定宽度：

       .screenAdaptive{

           width:1600px;

            height:100%;

       }

 

       这种方法有局限性，后期如果有好的方法，再次来更新。