zoukankan      html  css  js  c++  java
  • 适配不同大小浏览器——固定排班

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

           }

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

  • 相关阅读:
    我喜欢网站
    我喜欢网站
    wpf Textbox 回车就换行
    wpf Textbox 回车就换行
    arguments.callee的用法
    与您分享
    Examples — guidata v1.5.1 documentation
    与您分享
    与您分享
    hierarchical clustering algorithms
  • 原文地址:https://www.cnblogs.com/147258llj/p/5532397.html
Copyright © 2011-2022 走看看