- Responsive Web Design with HTML5 and CSS3（Second Edition）
- Ben Frain
- 364字
- 2021-07-16 20:33:56
Chapter 2. Media Queries – Supporting Differing Viewports
In the previous chapter, we had a brief look at the essential components for a responsive web page: a fluid layout, fluid images, and media queries.
This chapter will look in detail at media queries, hopefully providing all that's needed to fully understand their capability, syntax, and future development.
In this chapter, we shall:
- Learn why media queries are needed for a responsive web design
- Understand the media query syntax
- Learn how to use media queries in
linktags, with CSS@importstatements and within CSS files themselves - Understand what device features we can test for
- Use media queries to facilitate visual changes dependent upon available screen space
- Consider whether media queries should be grouped together or written as and where needed
- Understand the
metaviewport tag, to allow media queries to work as intended on iOS and Android devices - Consider the capabilities being proposed for future media queries specifications
The CSS3 specification is made up of a number of modules. Media Queries (Level 3) are just one of these modules. Media queries allow us to target specific CSS styles depending upon the capabilities of a device. For example, with just a few lines of CSS we can change the way content is displayed, dependent upon things such as viewport width, screen aspect ratio, orientation (landscape or portrait), and so on.
Media queries are widely implemented. Pretty much everything other than ancient versions of Internet Explorer (8 and below) support them. In short, there's absolutely no good reason not to be using them!
Tip
Specifications at the W3C go through a ratification process. If you have a spare day, knock yourself out with the official explanation of the process at http://www.w3.org/2005/10/Process-20051014/tr. The simpler version is that specifications go from Working Draft (WD), to Candidate Recommendation (CR), to Proposed Recommendation (PR) before finally arriving, many years later, at W3C Recommendation (REC). Modules at a greater maturity level than others are generally safer to use. For example, CSS Transforms Module Level 3 (http://www.w3.org/TR/css3-3d-transforms/) has been at WD status since March 2009 and browser support for it is far poorer than CR modules such as media queries.
- OpenDaylight Cookbook
- Spring Cloud Alibaba微服務架構設計與開發實戰
- 企業級Java EE架構設計精深實踐
- C/C++常用算法手冊（第3版）
- jQuery開發基礎教程
- 零基礎學Python網絡爬蟲案例實戰全流程詳解（高級進階篇）
- 碼上行動：用ChatGPT學會Python編程
- PhoneGap：Beginner's Guide（Third Edition）
- Python編程從0到1（視頻教學版）
- Scala for Machine Learning（Second Edition）
- Creating Data Stories with Tableau Public
- Java EE企業級應用開發教程（Spring+Spring MVC+MyBatis）
- Scala編程實戰
- 嵌入式Linux C語言程序設計基礎教程
- Elasticsearch搜索引擎構建入門與實戰