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

This article will explain in detail how to achieve media query on css responsive web pages. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Handwritten responsive web pages, the specific technical points are:

1. Declare viewport meta tags (a must for responsive web pages)

Width of width-viewport height-height of viewport

Initial-scale-initial scale

Minimum-scale-the minimum scale to which users are allowed to zoom

Maximum-scale-the maximum scale to which users are allowed to zoom

User-scalable-whether the user can zoom manually

two。 All the pictures on the page should use responsive pictures such as:

Img {width:50% (the proportion of the picture in the parent element) max-width:50%; (the percentage in the parent container and cannot exceed the size of the picture itself-to prevent distortion caused by infinite magnification of the picture)}

3. Use streaming layout (layout elements use floating or inline fast)

4. Avoid using absolute dimensions such as px, and use relative units em or rem

Em: font size relative to the parent element

Rem: font size relative to the root directory

5. Use CSS3MediaQuery technology (most important)

Media: refers to the device that browses the web, such as screen (pc/pad/phone/watch/print/tv/projection/tty (needle printer / cmd) / braille (screen reading software).

MediaQuery: query the current browsing device type, resolution, color depth, landscape/portait, and so on.

CSS3 MediaQuery: selectively executes some CSS styles based on the characteristics of the current browsing device, while ignoring others.

There are two specific practices:

1. Selectively execute some external CSS files

Features: only external style files with true media query results will be executed, otherwise they will not be executed! Deficiency: even if it does not match the external style file of the current browsing device, it will be requested by the browser!

two。 Selectively execute some styles in a section of CSS

@ media screen and (min-width:768px) and (max-width:991px) {

.box {

Margin: 6px

...

}

}

This is the end of the article on "how to realize media query on css responsive web pages". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.