Adaptable to different size browsers--fixed shifts

This article is about narrowing the browser, scheduling does not change with the size of the browser window, if you need to schedule changes with the browser, the use of bootstrap will be better, today is to introduce fixed scheduling

Add JS Code:

<script language= "JavaScript" >functionReadypage () {if(Screen.width >= 1600){                $(". Content_container"). Width (1600); }             Else if((screen.width >= 1400) && (Screen.width < 1600)){                $(". Content_container"). Width (1400);//The action you need at this resolution            }               Else if((Screen.width >=) && (Screen.width < 1400)){                $(". Content_container"). Width (1024);//The action you need at this resolution            }                           Else if((screen.width >= 980) && (Screen.width < 1024)){                $(". Content_container"). Width (980);//The action you need at this resolution            }                          Else {                $(". Content_container"). Width (800);//at this resolution you operate            }        }    </script>

View Code

Then in the body, introduce JS, add code: onload= "Readypage ()"

There is another way, when the browser shrinks, the schedule does not change as he shrinks, but the current attempt, is able to do, on this machine full-screen display Oh, on other machines, you may need to drag the progress bar to see full screen.

Content is what we need to show and add a parent div before the content, as follows:

<div class= "Container" >

<div class= "Screenadaptive" >

Content

</div>

</div>

The width of the container is handled as follows:

. container {

width:100%;

height:100%;

margin:0 Auto;

}

For the parent of content, specify the width:

. screenadaptive{

width:1600px;

height:100%;

}

This method has limitations, and later if there is a good way to update again.

Adaptable to different size browsers--fixed shifts