How to fix web page resolution

【Foreword】

    I still remember the first time I made a website, I encountered this problem. The webpage I made was distorted on my colleague's monitor. The reason was that when I made the website, I didn't take into account the resolutions of different monitors, and the fixed webpage was naturally not pulled. To stretch is to dismember.

    The solutions are as follows:

    1: Create pages in various resolutions;

    Two: Make different style files for different resolutions, and still use js to judge;

    3: Similar to method 2, make different style files for different resolutions, and use media queries to judge;

   The following will be introduced in turn:
(1) Create pages with different resolutions;

 

function diffPage(){
    var url1280 = 'demo [1280] .html';
    var url1024 = 'demo [1024] .html';
    var url800 = 'demo [800] .html';
    if((screen.width==1024) &&(screen.height==768)){
        window.location.href=url1024;  
    }else if ((screen.width==1280)&&(screen.height==800)) {      
        window.location.href=url1280;
    }else if ((screen.width==800)&&(screen.height==600)){        
        window.location.href=url[800];
    } else{
        window.location.href=url1280;       
}

   Disadvantages: Although this method solves the problem of page resolution, it also increases the workload a lot, that is, how many pages are written for the number of resolutions there are

 

 

(2) Make different style files for different resolutions, and still use js to judge;

 

(3) Similar to method 2, make different style files for different resolutions, and use media query to judge;

        Media query is a new feature introduced by CSS3. In the field that meets the CSS3 specification, it contains multiple expressions. These expressions describe the characteristics of the media and will eventually be parsed as true or false.

        Media queries can be divided into media queries in link tags and media queries in CSS style sheets

 

<!-- CSS media query in link element -->
<link rel="stylesheet" media="screen and (min-width: 1205px) and (max-width: 1280px)"
      href="css/index[1025-1280].css">

<!-- CSS media queries in style sheets -->
<style>
@media (max-width: 1024px) {
  .page {
    width: 80%;
  }
}
</style>

 

 

 

 

 

 

.