- Responsive Web Design with HTML5 and CSS3(Second Edition)
- Ben Frain
- 466字
- 2021-07-16 20:33:57
Combine media queries or write them where it suits?
I'm a fan of writing media queries underneath the original 'normal' definition. For example, let's say I want to change the width of a couple of elements, at different places in the style sheet, depending upon the viewport width I would do this:
.thing { width: 50%; } @media screen and (min-width: 30rem) { .thing { width: 75%; } } /* A few more styles would go between them */ .thing2 { width: 65%; } @media screen and (min-width: 30rem) { .thing2 { width: 75%; } }
This seems like lunacy at first. We have two media queries that both relate to when the screen has a minimum width of 30rem. Surely repeating the same @media
declaration is overly verbose and wasteful? Shouldn't I be advocating grouping all the identical media queries into a single block like this:
.thing { width: 50%; } .thing2 { width: 65%; } @media screen and (min-width: 30rem) { .thing { width: 75%; } .thing2 { width: 75%; } }
That is certainly one way to do it. However, from a maintenance point of view I find this more difficult. There is no 'right' way to do this but my preference is to define a rule for an individual selector once and have any variations of that rule (such as changes within media queries) defined immediately after. That way I don't have to search for separate blocks of code to find the declaration that is relevant to a particular selector.
It would seem fair to argue against the former technique on the grounds of verbosity. Surely file size alone should be enough reason not to write media queries in this manner? After all, no one wants a big bloated CSS file to serve their users. However, the simple fact is that gzip compression (which should be compressing all the possible assets on your server) reduces the difference to a completely inconsequential amount. I've done various tests on this in the past so if it's something you would like to read more about, head over to: http://benfrain.com/inline-or-combined-media-queries-in-sass-fight/. The bottom line is, I don't believe you should concern yourself with file size if you would rather write media queries directly after the standard styles.
- VMware View Security Essentials
- LabVIEW2018中文版 虛擬儀器程序設(shè)計(jì)自學(xué)手冊(cè)
- R語(yǔ)言編程指南
- INSTANT CakePHP Starter
- STM32F0實(shí)戰(zhàn):基于HAL庫(kù)開發(fā)
- Learning Python by Building Games
- JavaScript:Moving to ES2015
- Scala編程實(shí)戰(zhàn)(原書第2版)
- Python Web數(shù)據(jù)分析可視化:基于Django框架的開發(fā)實(shí)戰(zhàn)
- jQuery Mobile移動(dòng)應(yīng)用開發(fā)實(shí)戰(zhàn)(第3版)
- Python全棧數(shù)據(jù)工程師養(yǎng)成攻略(視頻講解版)
- 軟件供應(yīng)鏈安全:源代碼缺陷實(shí)例剖析
- Learning AWS
- Nagios Core Administration Cookbook(Second Edition)
- OpenMP核心技術(shù)指南