- Mastering PostCSS for Web Design
- Alex Libby
- 236字
- 2021-07-14 11:12:27
Revisiting media queries
If you spend any time viewing sites on different devices, then it will hardly come as a surprise to see media queries in the style sheet—they form the basis for responsive design and declarations allow us to control what is displayed on screen, according to the available screen width.
The principles behind media queries are simple. In a nutshell, we have to define the device or media, and the resolution (or width) at which point the rule (or breakpoint) either kicks in or stops being applied. Take this simple example:
@media only screen and (max-width: 768px) { /* CSS Styles */ ... }
Any styles within will be applied only when we're viewing on screen, and our available screen estate is 768px
or less. This is a simple example, they can be as simple or as complex as required; it's down to us as developers to work out exactly where our content breaks and to build a suitable breakpoint to manage the change.
Note
To get a feel for some of the more recent media queries that are possible, take a look at this post by Chris Coyier, who has queries for laptops, PCs, and even wearable devices! The list is available at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
Okay, let's make a start: PostCSS makes it easy to manage queries for both text and images; we'll begin our journey with a look at handling images.
- Software Defined Networking with OpenFlow
- Vue.js快速入門與深入實戰(zhàn)
- .NET 4.0面向?qū)ο缶幊搪劊夯A(chǔ)篇
- 基于Java技術(shù)的Web應(yīng)用開發(fā)
- 信息安全技術(shù)
- Functional Programming in JavaScript
- Banana Pi Cookbook
- Linux環(huán)境編程:從應(yīng)用到內(nèi)核
- Mastering Kali Linux for Web Penetration Testing
- 基于Swift語言的iOS App 商業(yè)實戰(zhàn)教程
- SharePoint Development with the SharePoint Framework
- 從Excel到Python:用Python輕松處理Excel數(shù)據(jù)(第2版)
- SQL Server 2008 R2數(shù)據(jù)庫技術(shù)及應(yīng)用(第3版)
- MATLAB GUI純代碼編寫從入門到實戰(zhàn)
- Orchestrating Docker