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

This article mainly introduces the CSS3 implementation of media query example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

Esponsive Web Design

Combine existing development skills (elastic grid layout, elastic pictures, media and media queries)

Integrated and named as responsive web design

It is a display mechanism that makes a "perfect" layout of web content for any device.

In short, a website can be compatible with multiple terminals-rather than making a specific version for each terminal.

advantage

Multi-terminal vision and operation experience are very unified in style.

Compatible with current and future new equipment

Most of the techniques in responsive web design can be used in WebApp development.

The development cost is saved, and the maintenance cost is reduced a lot.

Deficiency

Compatibility: there is a problem with the compatibility of lower version browsers

Mobile bandwidth traffic: compared with mobile customized websites, the traffic is slightly larger.

But it is obviously much smaller than loading a complete pc-side website.

The code is cumbersome, there will be hidden useless elements, and the loading time will be longer

Be compatible with all kinds of equipment and have a large workload.

Mobile priority

At the beginning of the design, how to display the page in multiple terminals

Progressive enhancement

Give full play to the maximum function of hardware equipment

What does it apply?

For websites with heavy content, such as image display, it is more suitable to use responsive web design.

Does not apply to what?

For websites with heavy functions, such as e-commerce, it is more recommended to use independent mobile sites

CSS3-media Query (Media Inquiry)

Javascript

Third-party open source framework

Bootstrap

Common attribute operations

Screen width and height of device-width/device-height device

Width/height (render window width) actual display width

Resolution device resolution

Orientation device Direction

Portrait/landscape vertical or horizontal screen

Initial-scale sets the initial zoom ratio of the page (0-10.0)

User-scalable sets whether the user can zoom (yes/no)

Minimum-scale sets the minimum reduction ratio (0-10.0)

Maximum-scale sets the maximum magnification (0-10.0)

The above is all the contents of the article "sample Analysis of Media query implemented by CSS3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.