How can I solve the problem of self-adaptation between PC and mobile devices? -Xiangting Feng

How can I solve the problem of self-adaptation between PC and mobile devices? -When making a webpage to Ting Feng, we usually need to consider different computer screen sizes and different cell phone screen sizes to solve the problem of style changes. How can this problem be solved? Now we mainly use auto-adaptation to solve the problem of height, width, and image self-adaptation. Next we will summarize the problems on PC and mobile terminals. Generally, when we adopt auto-adaptive height and width, it is generally related to the page layout.

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

2. A slightly larger resolution after 1024*768 is 1280*768. You can use pixel PX or 1220px as the slightly larger page width.

3. Advanced browsers supporting css3 and html5 can use CSS3 Media Queries to automatically adjust layout labels for webpages at different resolutions.

4. browsers that do not support css3 or html5, especially the <= ie8 series, use js and resize events to control the layout tag width of html.

5. Width adaptation requires different width calculations for each display module. A large amount of calculations and adaptation are required for html layout.

6. Adaptive width: css is often used to write layout elements for different display widths.

Next, let's take a look at how to use js and css to adapt to the screen size.

I. Knowledge about the basics of height and width

The image below is used for illustration:

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

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

Upper left area of the page to which the page is rolled: document. body. scrollTop | document. body. scrollLeft

II:Css adaptive height

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

Method 1:
// Html part
Left
Body
// Css part
* {Margin: 0; padding: 0}
# Left {float: left; width: 200px; background: red ;}
# BodyText {margin-left: 200px; background: yellow;

Method 2:
// Html part
Left


    
Body


// Css part
# Left {float: left; width: 200px; background: red; margin-right:-100% ;}
# Body {width: 100%; float: left ;}
# BodyText {margin-left: 200px; background: yellow ;}

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

Method 1:
Left
---- Note that it is related to the position of p.
Right side
Intermediate

// Css part
# Left {width: 200px; background: red; float: left ;}
# Center {width: auto; background: blue ;}
# Right {width: 200px; background: yellow; float: right ;}

Method 2:
Html section:

    
Intermediate


Left

Right side

Css section:
# Body {width: 100%; float: left;} // set float and width: 100%
# Body # center {background: red; margin-left: 200px; margin-right: 300px;} // usage of margin-left: 100%
# Left {width: 200px; background: yellow; margin-left:-100%; float: left}
# Right {width: 300px; background: blue; margin-left:-300px; float: left}
----- If it is set to margin-left:-100%, it will run to the left of the body.
----- If it is set to margin-left:-300px (that is, the right width), it will run to the right of the body

3. About the minimum width and maximum width

Here, we can see the following code: Adaptive width to change the layout.

// Html part
    
    
    
 
// Css part # container {width: 100% ;}. one {width: 20%; background: red ;}. one ,. two ,. three {float: left; height: 100px ;}. two {width: 60%; background: yellow ;}. three {width: 20%; background: blue;} @ media (max-width: 800px) {-- if the browser is smaller than 800px. one {width: 40% ;}. two {width: 60% }. three {width: 100% }}@ media (max-width: 400px) -- if the browser width is less than 400px {. one {width: 100% }. two {width: 100% }. three {width: 100% }}

Understand what is the minimum width and the maximum width. The minimum width refers to the minimum width set for the element. After the minimum width is reached, the scaled text will not play any role.

The maximum width is the upper limit that all elements can reach.

Iii. Adaptive height of css Processing

// Some html code
// Css code html, body {margin: 0; height: 100% ;}# fit {width: 200px; background: yellow; height: 100%; border: 1px solid red ;}

-- The style is added to html and body at the same time to ensure compatibility with various browsers.
When IE is in the mixed mode, the body takes the window as the height reference. Setting the body to 100% can make the page as high as the window. The nested p in the body can also be extended to the window height,
In this way, the layout can adapt to the browser window size. Form body p (html, body {overflow: scroll} a layer of scroll bars)

However, when in standard mode, the body uses the html tag as the height reference, and the html Tag uses the window as the reference. Therefore, only the body 100% does not make its child p100 % occupy the entire screen.
Make html 100% so that html can get the window size. Form, html, body, p (html, body {overflow: scroll} Two-layer scroll bars, html scroll bars are never used)

The parent level changes with the height of the Child level and the child level changes with the height of the parent level.

I am a parent
I am Sublevel 1
   
I am sublevel 2

// Css part
# Fj {border: 4px solid red ;}
# Zj1 {border: 2px solid yellow ;}
# Zj2 {border: 2px solid blue;} ---- in this case, the parent height changes with the height of the child p

If the child p uses the float attribute and is out of the standard stream, the parent p does not change with the height of the content. The solution is to add an empty p under the floating p, set the clear attribute both

I am a parent
I am a sub-level 11111111111111111111111111
   
I am a sub-level 222222222222222222222222222222222222222222 222222222222222222222222222
   
------ If this sentence is removed, the parent p height will not change with the child height

// Css part
# Fj {border: 4px solid black ;}
# Zj1 {border: 2px solid yellow; float: left}
# Zj2 {border: 2px solid blue; float: left}

There are still many highly adaptive methods, which are not listed here. Such as height: auto.

Iv. js height and width Adaptive Processing

222222222222222222222
// Js part function setHeight (obj) {var temHeight = null; // FF if (window. innerHeight) {temHeight = window. innerHeight; // page height and scroll bar height} else {temHeight = document. body & document. body. clientHeight;} if (temHeight> document. body. clientHeight) // page height {oDiv. style. height = temHeight + "px";} else {oDiv. style. height = document. body. clientHeight + "px" ;}} window. onload = function () {var oDiv = document. getElementById ("p1"); getHeight (oDiv );}

Adaptive width code:

Function setWidth (obj)
{Var screenWidth = window. screen. width; var imgURL; if (screenWidth> = 1440)
{Width = "1400px"; imgURL = "1400.png"; // sets the image at different resolutions}
Else if (1024 <screenWidth & screenWidth <1440)
{Width = "pixel PX"; imgURL = "developer.png ";}
Else {width = "980px"; imgURL = "980.png";} obj. style. width = width;
Obj. style. backgroundImage = "url (" + imgURL + ")";})

V. Adaptive height and width of the Mobile Terminal

The Mobile End is relatively simpler. First, add a line of viewport tag to the header of the webpage code.

The viewport is the default width and height of the webpage. It indicates that the webpage width is equal to the screen width of the device by default. The original zoom ratio is 1, that is, the initial size of the webpage accounts for 100% of the screen area.

1: Because the webpage will adjust the layout according to the screen width, you cannot use an absolute width layout or an element with an absolute width. This article is very important. Specifically, the CSS Code cannot specify the pixel width:Width: xxx px; only the percentage width can be specified:width: xx%;Orwidth:auto;

2: Generally, em is used and the px font is used as few as possible.

3: Use flow Layout

4: the Core of adaptive webpage design is the media query module introduced by CSS3. : Http://download.csdn.net/download/song_121292057/8031781

Automatically detects the screen width and loads the corresponding CSS file.

    
  

-------When the screen is smaller than, the file style.css is used.

5: In addition to loading CSS files with html tags, you can also load them in existing CSS files.

@ Import url ("style2.css? 6.1.3 ") screen and (max-device-width: 800px); // when the screen size is smaller than 800px, the style2.css file is used.

6: Automatic scaling of images, which is relatively simple. Just one line of CSS code:Img {max-width: 100%;} we recommend that you load images of different sizes and pixels based on different screen resolutions.

Mobile Terminal self-adaptation is almost so much. The main core is to use mediaquery to achieve different la s based on different screen sizes. The code can be seen in the column above. Here we will not repeat the writing.

I summarized some of my problems. Could you please leave me a message!

Author: Xiang tingfeng

Source: http://www.cnblogs.com/jtjds/p/5480857.html

If you think it is helpful to read this article, click the "recommendation" button. Your "recommendation" will be my greatest motivation for writing! You are welcome to repost it, but it is not prepared by the author.

I agreeAfter reprinting an article, the author must be clearly connected to the original article on the article page; otherwise, the legal liability is reserved.