How HTML automatically adapts web design to screen width

Today’s article mainly talks about how HTML automatically adapts web design to the screen width. Friends who need it can refer to it. I hope it can help everyone.

Allow web page width to adjust automatically

How does "adaptive web design" work? It's not that difficult.

First, add a line of viewport meta tag at the head of the web page code.

##viewport is the default width and height of the web page. The above line of code means that the width of the web page is equal to the screen width by default (width=device-width), and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies the screen 100% of the area.

All major browsers support this setting, including IE9. For those older browsers (mainly IE6, 7, and 8), you need to use

css3-mediaqueries.js.

Do not use absolute width

Because the web page will adjust the layout according to the screen width, absolute width cannot be used The layout also cannot use elements with absolute width. This one is very important.

Specifically, CSS code cannot specify pixel width:

width:xxx px;<span style="font-family:'Courier New';font-size:14px;"></span>Only percentage width can be specified:width: xx%; <span style="font-family:'Courier New';font-size:14px;"></span>orwidth:auto;<span style="font-family:'Courier New';font-size:14px;"></span>

##Related recommendations: <span style="font-family:'Courier New';font-size:14px;"></span>

Web page adaptive screen width

HTML5 responsive (adaptive) web design

How to make a web page that adapts to the screen size from

The above is the detailed content of How HTML automatically adapts web design to screen width. For more information, please follow other related articles on the PHP Chinese website!