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


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

           }

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

  • 相关阅读:
    新的for增强循环方法,记录一下,方便以后使用
    Intellij IDEA 自动生成 serialVersionUID
    Java知识点汇总[Review]
    D16-常用十种算法[Java数据结构和算法]
    W9-请求响应[JavaWeb]
    D15-图[Java数据结构和算法]
    D14-多路查找树[Java数据结构和算法]
    D13-平衡二叉树[Java数据结构和算法]
    D12-二叉排序树[Java数据结构和算法]
    D11-堆排序和赫夫曼编码[Java数据结构和算法]
  • 原文地址:https://www.cnblogs.com/147258llj/p/5532397.html
Copyright © 2020-2023  润新知