A quick solution to the problem of PC and mobile adaptation

A quick solution to the problem of PC and mobile adaptation

When making a web page, we usually need to consider issues such as different computer screen sizes and different mobile phone screen sizes, and solve the problem of style changes. So how do we solve this problem? Now we mainly use adaptation to solve the problems of height, width, and picture adaptation. Let's summarize it on PC and mobile terminals. Usually, when adaptive height and width are performed, and pictures are generally related to the layout of the page.

1. The minimum resolution is 1024*768 (traditional 17-inch monitor), then 940px, 960px, or the commonly used 980px can be used as the minimum width

2. The next larger resolution after 1024*768 is 1280*768, so you can use 1200px or 1220px as the larger webpage width

3. Advanced browsers that support css3 and html5 can use CSS3 Media Queries to allow web pages to automatically adjust layout tags at different resolutions

4. For browsers that do not support css3 and html5, especially those <= ie8 series, you need to use js and resize events to control the width of html layout tags.

5. Width adaptation requires calculation of different widths for each display module, which requires a lot of calculation and adaptation when doing HTML layout.

6. Width Adaptation Commonly used CSS when writing layout elements for different width displays

Next, let’s see how to use js and css to adapt to the size of the screen.

One: Understand the basics of height and width

Here are some pictures to illustrate:

The height and width of the visible area of ​​the web page are: document.body.clientHeight||document.body.clientWidth

The height and width of the web page body area are: document.body.scrollHeight||document.body.scrollWidth (including the length of the scroll wheel)

The upper left area of ​​the web page that is scrolled away: document.body.scrollTop||document.body.scrollLeft

Two: css adaptive height

1. Two-column layout, fixed on the left and adaptive on the right

XML/HTML Code copy content to the clipboard
  1. Method 1:
  2. //html part
  3. < div   id = " left " > Left </div>   
  4. < div   id = "bodyText " > Body text </div>   
  5. //css part
  6. *{margin:0;padding:0}
  7. #left{float:left;width:200px;background:red;}
  8. #bodyText{margin-left:200px;background:yellow;
  9.   
  10. Method 2:
  11. //html part
  12. < div   id = " left " > Left </div>   
  13. < div   id = "body" >   
  14.      < div   id = "bodyText " > Body text </div>   
  15. </ div >   
  16. //css part
  17. #left{float:left;width:200px;background:red;margin-right:-100%;}
  18. #body{width:100%;float:left;}
  19. #bodyText{margin-left:200px;background:yellow;}

2. Three-column layout, fixed width on both sides, adaptive width in the middle

  1. Method 1
to copy XML/HTML Code content to the clipboard
:
  1. < div   id = "left" > Left </div> ----Note that it is related to the position of the div
  2. < div   id = " right " > right </div>   
  3. < div   id = " center " > center </div>   
  4. //css part
  5. #left{width:200px;background:red;float:left;}
  6. #center{width:auto;background:blue;}
  7. #right{width:200px;background:yellow;float:right;}
  8.   
  9. Method 2:
  10. HTML part:
  11. < div   id = "body" >   
  12.      < div   id = " center " > center </div>   
  13. </ div >   
  14. < div   id = " left " > Left </div>   
  15. < div   id = " right " > right </div>   
  16. CSS part:
  17. #body{width:100%;float:left;} //Set floating and width:100%
  18. #body #center{background:red;margin-left:200px;margin-right:300px;} //How to use margin-left:100%
  19. #left{width:200px;background:yellow;margin-left:-100%;float:left}
  20. #right{width:300px;background:blue;margin-left:-300px;float:left}
  21. -----If set to margin-left:-100%, it will run to the left side of the body.
  22. -----If it is set to margin-left:-300px (that is, the width of right), it will run to the right side of body

3. Regarding the minimum width and maximum width

, we still look at it in conjunction with the layout, such as the following code: adaptive width, thereby changing the layout.

XML/HTML CodeCopy the content to the clipboard
  1. //html part
  2. < div   id = 'container' >   
  3.      < div   class = 'one' > </ div >   
  4.      < div   class = 'two' > </ div >   
  5.      < div   class = 'three' > </ div >   
  6.   </ div >   
  7.   
  8. //css part
  9. #container{width:100%;}
  10. .one{width:20%;background:red；}
  11. .one,.two,.three{float:left; height:100px;}
  12. .two{width:60%;background:yellow;}
  13. .three{width:20%;background:blue;}
  14. @media (max-width:800px){--If the browser is less than 800px
  15. .one{width:40%;}
  16. .two{width:60%}
  17. .three{width:100%}
  18. }
  19. @media (max-width:400px)--If the browser width is less than 400px
  20. {
  21. .one{width:100%}
  22. .two{width:100%}
  23. .three{width:100%}
  24.      
  25. }

Understand what minimum width and maximum width are. The minimum width refers to the minimum width set for an element. After reaching the minimum width, scaling the text will not have any effect

. The maximum width is an upper limit that all elements can reach and cannot be increased any further.

Three: CSS handles adaptive height

XML/HTML CodeCopy the content to the clipboard
  1. //html part of the code
  2. < div   id = "fit" > </ div >   
  3. //css code
  4. html, body{margin:0;height:100%;}
  5. #fit{width:200px;background:yellow;height:100%;border:1px solid red;}
  6.   
  7. --Here, styles are added to both html and body to be compatible with major browsers.
  8. When IE is in promiscuous mode, the body uses the window as a reference for height. Setting the body to 100% can make the page as high as the window. The nested divs in the body can also be expanded to the window height,
  9. so that the layout can adapt to the size of the browser window. Form > body > div (html, body {overflow:scroll} one layer of scroll bar)
  10. However, when in standard mode, the body uses the html tag as a reference for height, and the html tag uses the window as a reference. So just body 100% cannot make its child div occupy 100% of the entire screen.
  11. You also need to make html 100% so that html obtains the window size. Form>html>body>div (html, body {overflow:scroll} two-layer scroll bar, html scroll bar is never used)

parent level changes adaptively with child level height and child level changes with parent level height

XML/HTML CodeCopy content to clipboard
  1. < div   id = "fj" >   
  2. I am a parent
  3.     < div   id = "zj1" > I am child 1 </ div >   
  4.     < div   id = "zj2" > I am child 2 </ div >   
  5. </ div >   
  6. //css part
  7. #fj{border:4px solid red;}
  8. #zj1{border:2px solid yellow;}
  9. #zj2{border:2px solid blue;}----In this case, the height of the parent changes adaptively with the height of the child div.

If the child div uses the float attribute, it has already left the standard flow, and the parent div will not change with the height of the content. The solution is to add an empty div under the floating div and set the clear attribute both

XML/HTML CodeCopy content to clipboard
  1. < div   id = "fj" >   
  2. I am a parent
  3.     < div   id = "zj1" > I am child 11111111111111111111111111 </ div >   
  4.     < div   id = "zj2" > I am a child 22222222222222222222222222222222222222222222
  5. 22222222222222222222222222 </ div >   
  6.     < div   id = "clear"   style = "clear:both" > </ div > ------ If this sentence is removed, the height of the parent div will not change with the height of the child div
  7. </ div >   
  8. //css part
  9. #fj{border:4px solid black;}
  10. #zj1{border:2px solid yellow;float:left}
  11. #zj2{border:2px solid blue;float:left}

There are many other methods for height adaptation, which are not listed here. Like height:auto and so on.

Four: js handles height and width adaptation issues

XML/HTML CodeCopy content to clipboard
  1. < div   id = "div1"   > 22222222222222222222 </ div >   
  2. //js part
  3. function setHeight(obj)
  4. {
  5. var temHeight = null ;
  6. //FF
  7. if(window.innerHeight)
  8. {
  9.      temHeight = window.innerHeight ; //Including page height and scroll bar height
  10. }
  11. else
  12. {
  13.       temHeight = document.body &&document.body.clientHeight;
  14. }
  15. if(temHeight > document.body.clientHeight)//page height
  16. {
  17.       oDiv.style.height = temHeight + "px";
  18. }
  19. else
  20. {
  21.      oDiv.style.height = document.body.clientHeight +"px";
  22. }
  23. }
  24. window.onload = function ()
  25. {
  26. var oDiv = document .getElementById("div1");
  27. getHeight(oDiv);
  28. }

Width adaptive code:

XML/HTML CodeCopy content to clipboardfunction
  1. setWidth(obj)
  2. {
  3. var screenWidth = window.screen.width ;
  4. var width;
  5. var imgURL;
  6. if (screenWidth > = 1440)
  7. {
  8.           width = "1400px" ;
  9.           imgURL = "1400.png" ; //Set images at different resolutions
  10. }
  11. else if (1024 <   screenWidth && screenWidth <   1440 )
  12. {
  13.           width = "1200px" ;
  14.           imgURL = "1200.png" ;
  15. }
  16. else {
  17.            width = "980px" ;
  18.            imgURL = "980.png" ;
  19. }
  20.         obj.style.width =width;
  21.         obj.style.backgroundImage = "url(" + imgURL + ")";
  22. })

Five: Adaptive height and width

of mobile terminals The mobile terminal is relatively simpler. First, add a line of viewport tags to the head of the web page code.

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport is the default width and height of the web page. The above means that the width of the web page is equal to the width of the device screen by default, and the original scaling ratio is 1, that is, the initial size of the web page occupies 100% of the screen area.

1: Since the web page will adjust the layout according to the screen width, you cannot use an absolute width layout or elements with absolute width. This one is very important. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

:

:

: : : : : : : : : : : : : : : : : : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : :

: : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

:

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

The above quick solution to the adaptation problem between PC and mobile terminals is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  HTML basics HTML structure

>>:  Several situations that cause MySQL to perform a full table scan

Recommend

Comparative Analysis of IN and Exists in MySQL Statements

Background Recently, when writing SQL statements,...

CSS to achieve chat bubble effect

1. Rendering JD Effect Simulation Effect 2. Princ...

JS realizes picture digital clock

This article example shares the specific code of ...

JavaScript Html to implement the mobile red envelope rain function page

This article example shares the specific code of ...

Node quickly builds the backend implementation steps

1. First install node, express, express-generator...

Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)

Preface The Windows system that can be activated ...

Detailed explanation of the differences between similar tags and attributes in HTML

【1】<i></i> and <em></em> ...

Modification of time zone problem of MySQL container in Docker

Preface When Ahhang was developing the Springboot...

Tomcat common exceptions and solution code examples

The company project was developed in Java and the...

VMware virtual machine to establish HTTP service steps analysis

1. Use xshell to connect to the virtual machine, ...

The perfect solution for Vue routing fallback (vue-route-manager)

Table of contents Routing Manager background gett...

Turn off the AutoComplete function in the input box

Now we can use an attribute of input called autoco...

Vue implements tree table

This article example shares the specific code of ...

Detailed steps to install Sogou input method on Ubuntu 20.04

1. Install Fcitx input framework Related dependen...

How the Linux kernel breaks into the process address space and modifies the process memory

Isolation of process address spaces is a notable ...