Example Analysis of Media query implemented by CSS3
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!
