- 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.
- 大話PLC（輕松動漫版）
- Raspberry Pi for Python Programmers Cookbook（Second Edition）
- Java Web開發學習手冊
- 實戰Java程序設計
- Programming ArcGIS 10.1 with Python Cookbook
- 大學計算機基礎（第2版）（微課版）
- Python深度學習原理、算法與案例
- Web前端應用開發技術
- Mastering ArcGIS Enterprise Administration
- Go語言編程
- 從0到1：HTML5 Canvas動畫開發
- 貫通Tomcat開發
- 軟件工程與UML案例解析（第三版）
- C語言程序設計與應用實驗指導書（第2版）
- Java EE程序設計與開發實踐教程