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

This article introduces the relevant knowledge of "what are the adaptive methods of HTML+CSS web pages". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1.viewport tag

Basic syntax:

The above line of code means that 100% of the area, the web page width is equal to the screen width by default (width=device-width)

The original zoom ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies the screen.

two。 Media inquiry

The core of "adaptive web design" is Media Query introduced by CSS3.

Automatically detect the screen width and then load the corresponding CSS file.

The above code means that if the screen width is less than 767 pixels (max-width:767px), the phone.css file is loaded.

The above code means that if the screen width is greater than 767 pixels (min-width:767px), the style.css file is loaded.

3. Does not apply absolute width

1) Page width

CSS code cannot specify pixel width, percentage should be used

Example: width: xxx%

2) relative font size

The rem font size is relative to the root element font size. The default web page root element size is 100%, that is, 16 pixels, so 1rem = 16px; (0.75rem = 12px, 0.875rem = 14px;)

In a real project, you can set it in the following ways:

Html {font-size:62.5%} is 1rem = 10px

There is another form of percentage.

3) Image adaptation (fluid image)

"Adaptive web design" must realize the automatic scaling of pictures.

Img {max width: 100%;}

To ensure that all multimedia tags are self-adaptive, you can also set object,embed {max-width: 100%;}

This is the end of the content of "what are the adaptive methods of HTML+CSS web pages". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.