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

W3C Tutorial (4): W3C XHTML Activities

HTML is a hybrid language used for publishing on ...

Detailed installation tutorial of zabbix 4.04 (based on CentOS 7.6)

1. Preparation before installation: 1.1 Install J...

Vue realizes simple effect of running light

This article shares the specific code of Vue to a...

Complete steps to configure IP address in Ubuntu 18.04 LTS

Preface The method of configuring IP addresses in...

Will css loading cause blocking?

Maybe everyone knows that js execution will block...

How to build a tomcat image based on Dockerfile

Dockerfile is a file used to build a docker image...

Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)

In the SQL like statement, for example SELECT * F...

Html+CSS drawing triangle icon

Let’s take a look at the renderings first: XML/HT...

HTML uses regular expressions to test table examples

Here is an example code for using regular express...

Vue implements Dialog encapsulation

Table of contents Vue2 Writing Vue3 plugin versio...

Steps of an excellent registration process

For a website, it is the most basic function. So l...

Example of Vue routing listening to dynamically load the same page

Table of contents Scenario Analysis Development S...

Detailed explanation of javascript event bubbling, event capture and event delegation

1. Event bubbling : In the process of JavaScript ...

5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)

Congratulations on finally convincing your bosses...

Solve the problem of docker container exiting immediately after starting

Recently I was looking at how Docker allows conta...