Content: Introduction to media queries and their usage, along with a comparison with mobile web development.
Media Queries
Media Queries
Device | Pixel Range |
---|---|
Extra Small Devices (Mobile) | 0px - 768px |
Small Devices (Tablet) | 768px - 992px |
Medium Devices (Desktop) | 992px - 1200px |
Large Devices (Laptops, Monitors) | 1200px and above |
Usage of Media Queries:
First Method - Non-Shorthand
1 | <style> |
Second Method - Shorthand
1 | <style> |
Media Queries Example
1 |
|
Comparison with Mobile Web Development
Development Approach, Corresponding Scenarios | Mobile Web Development + PC Development | Responsive Web Design (RWD) |
---|---|---|
Use Cases | Typically used when there is an existing PC website and a separate mobile version needs to be developed. | Used for building new websites that require adaptation to mobile devices, aiming for a single codebase across various devices, providing flexibility. |
Development | Highly targeted, resulting in high development efficiency. | Requires compatibility with various devices, resulting in more complex code and potentially slower loading times. |
Adaptation | Primarily targets mobile devices, with limited tablet support. | Adaptable to a wide range of devices. |
Efficiency | Simple code and fast loading times. | More complex code and potentially slower loading times. |