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

WeChat applet implements a simple handwritten signature component

Table of contents background: need: Effect 1. Ide...

Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice

1. Background In the context of rapid updates and...

How to use jconsole to monitor remote Tomcat services

What is JConsole JConsole was introduced in Java ...

Example of using @media responsive CSS to adapt to various screens

Definition and Use Using @media queries, you can ...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...

How to use SVG icons in WeChat applets

SVG has been widely used in recent years due to i...

In-depth analysis of HTML table tags and related line break issues

What is a table? Table is an Html table, a carrie...

Weather icon animation effect implemented by CSS3

Achieve results Implementation Code html <div ...

Discuss the value of Web standards from four aspects with a mind map

I have roughly listed some values ​​to stimulate ...

Solution to the problem of Windows Server 2008 r2 server automatically restarting for no reason

Windows Server 2008 server automatically restarts...

Zen coding for editplus example code description

For example, he enters: XML/HTML Code div#page>...

Implementation of multi-environment configuration (.env) of vue project

Table of contents What is multi-environment confi...

CSS Viewport Units for Fast Layout

CSS Viewport units have been around for the past ...

How to add sudo permissions to a user in Linux environment

sudo configuration file The default configuration...

How to use JavaScript and CSS correctly in XHTML documents

In more and more websites, the use of XHTML is rep...