pg星旅淘金游戏官网

書名： Responsive Web Design with HTML5 and CSS3（Second Edition）
作者名： Ben Frain
本章字?jǐn)?shù)： 501字
更新時間： 2021-07-16 20:33:56

Using media queries to alter a design

By their very nature, styles further down a cascading style sheet (CSS file to you and me) override equivalent styles higher up (unless styles higher up are more specific). We can therefore set base styles at the beginning of a style sheet, applicable to all versions of our design (or at least providing our 'base' experience), and then override relevant sections with media queries further on in the document. For example, we might choose to set navigation links as text alone in limited viewports (or perhaps just smaller text) and then overwrite those styles with a media query to give us both text and icons at larger viewports where more space is available.

Let's have a look at how this might look in practice (example_02-02). First the markup:

<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
<a href="#" class="CardLink CardLink_Spades">Spades</a>
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>

Now the CSS:

.CardLink {
    display: block;
    color: #666;
    text-shadow: 0 2px 0 #efefef;
    text-decoration: none;
    height: 2.75rem;
    line-height: 2.75rem;
    border-bottom: 1px solid #bbb;
    position: relative;
}

@media (min-width: 300px) {
    .CardLink {
        padding-left: 1.8rem;
        font-size: 1.6rem;
    }
}

.CardLink:before {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.CardLink_Hearts:before {
    content: "?";
}

.CardLink_Clubs:before {
    content: "?";
}

.CardLink_Spades:before {
    content: "?";
}

.CardLink_Diamonds:before {
    content: "?";
}

@media (min-width: 300px) {
    .CardLink:before {
        display: block;
    }
}

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Here's a screen grab of the links in a small viewport:

And here's a grab of them at a larger viewport:

Any CSS can be wrapped in a media query

It's important to remember that anything you would normally write in CSS can also be enclosed inside a media query. As such, it's possible to entirely change the layout and look of a site in different situations (usually for differing viewport sizes) with media queries.

Media queries for HiDPI devices

Another common use case for media queries is to change styles when the site is viewed on a high-resolution device. Consider this:

@media (min-resolution: 2dppx) {
  /* styles */
}

Here our media query is specifying that we only want the enclosed styles to apply where the screen resolution is 2 dots per pixel unit (2dppx). This would apply to devices like the iPhone 4 (Apple's HiDPI devices are given the 'Retina' moniker) and a whole raft of Android devices. You could change that media query to apply to a wider range of devices by reducing the dppx value.

Tip

For the broadest possible support, when writing min-resolution media queries, ensure you have a prefixing tool running to provide relevant vendor prefixes. Don't worry if the term vendor prefixes doesn't make much sense right now as we deal with the subject in more detail in the next chapter.

官术网_书友最值得收藏!

Responsive Web Design with HTML5 and CSS3（Second Edition）

Using media queries to alter a design

Tip

Any CSS can be wrapped in a media query

Media queries for HiDPI devices

Tip