Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to solve the problem of PC and mobile adaptation, which has a certain reference value. Interested friends can refer to it. I hope you will learn a lot after reading this article.

When making a web page, we usually need to consider different computer screen sizes, as well as different mobile phone screen sizes and other problems to solve the change of style, so how to solve it? Now we mainly use self-adaptation to solve the problems of height, width, and picture adaptability. let's sum up the PC side and the mobile end. We usually adapt the height and width. When a picture is taken, it has something to do with the layout of the page.

1. The minimum size resolution is 10240768 (traditional 17-inch display), then 940px, 960px, or commonly used 980px can be used as the minimum width.

2. If the resolution after 10240768 is 128000768, then 1200px or 1220px can be used as a slightly larger web page width.

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

4. Mentally retarded browsers that do not support css3 and html5, especially 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 ("div1")

GetHeight (oDiv)

}

Width adaptive code:

Function setWidth (obj)

{

Var screenWidth = window.screen.width

Var width

Var imgURL

If (screenWidth > = 1440)

{

Width = "1400px"

ImgURL = "1400.png"; / / set pictures at different resolutions

}

Else if (1024

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.