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

      此文介绍的是缩小浏览器,排班不随浏览器窗口大小变化,如果需要排班随浏览器变化,使用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 {

          100%;

          height:100%;

          margin:0 auto;

       }  

    对content的父级,指定宽度:

       .screenAdaptive{

           1600px;

            height:100%;

       }

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

原文地址:https://www.cnblogs.com/147258llj/p/5532397.html