AtoZ CSS快速提示：使用媒体查询创建响应式设计

淡淡的烟草味﹌ 2022-12-03 09:55 180阅读 0赞

This article is a part of our AtoZ CSS Series. View the full screencast and transcript for Media Queries [here][].

本文是我们的AtoZ CSS系列的一部分。 在[此处][here]查看媒体查询的完整屏幕录像和解说词。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, I’ve added a new quick tip/lesson about media queries for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时仅进行视频广播还不够，因此在本文中，我为您添加了有关媒体查询的新快速提示/课程。

![M2-01][]

## M用于媒体查询 **(**M is for Media Queries**)** ##

I would venture a guess that the vast majority of web designers and developers are familiar with the concept of responsive design these days. If not, check out the [Media Queries screencast][here].

我猜想这是当今大多数Web设计人员和开发人员都熟悉响应式设计的概念。 如果不是，请查看“ [媒体查询”截屏][here] 。

Since responsive design is so popular, it’s a good place to pick up a couple of tips for improving the way we develop websites and apps for multiple devices. Here are a couple of CSS tips to help you out.

由于自适应设计非常流行，因此这里是一些技巧，可以改善我们开发适用于多种设备的网站和应用的方式。 这里有一些CSS技巧可以帮助您。

### 提示1：请勿使用设备专用的断点 **(**Tip 1: Don’t use device specific breakpoints**)** ###

Hopefully this goes without saying, but just in case you need a reminder or you haven’t come across this best practice before, I thought it was worth reiterating.

希望这不用多说，但是以防万一您需要提醒，或者您以前从未遇到过这种最佳做法，我认为值得重申。

Device specific breakpoints are easily identified in your code with media queries that look like this (comments added for clarity):

可以通过以下类似的媒体查询在代码中轻松标识特定于设备的断点(为清楚起见添加了注释)：

/* ipad portrait */
    @media screen and (min-width: 768px;) {}
    
    /* ipad landscape */
    @media screen and (min-width: 1024px;) {}
    
    /* iphone */
    @media screen and (min-width: 320px) and (max-width: 480px;) {}

These breakpoints have been set up for Apple devices and have “magic number” values such as `768px` or `1024px`.

这些断点已为Apple设备设置，并且具有“幻数”值，例如`768px`或`1024px` 。

What if a user’s window is `1025px` or `1023px`?

如果用户的窗口是`1025px`或`1023px`怎么`1023px` ？

The media queries wouldn’t take affect and the styles for that device size would not apply.

媒体查询不会生效，并且该设备大小的样式将不适用。

Sometimes you may need a very specific value for your breakpoint (more on that in a second) but seeing these device specific breakpoints is a code smell as far as I’m concerned.

有时，您可能需要一个非常特定的断点值(一秒钟会详细说明)，但就我所知，看到这些设备特定的断点是一种代码味道。

So what should you do instead?

那么，您应该怎么做呢？

### 提示2：设置主要*断点*和次要*调整点* **(**Tip 2: Set major *breakpoints* and minor *tweakpoints***)** ###

When working on a responsive project, I tend to set arbitrary whole-number breakpoints that are approximately the dimensions of the majority of phones, tablets, and desktop/laptop devices.

在进行响应式项目时，我倾向于设置任意整数断点，这些断点大约与大多数电话，平板电脑和台式机/笔记本电脑设备的大小相同。

I would tend to use the following major breakpoints (although sometimes this may be altered on a project by project basis):

我倾向于使用以下主要断点(尽管有时可能会因项目而异)：

/* large phones and small tablets */
    @media screen and (min-width: 500px;) {}
    
    /* tablets and small monitors */
    @media screen and (min-width: 800px;) {}
    
    /* laptops and desktops */
    @media screen and (min-width: 1200px;) {}

Using these breakpoints doesn’t limit the design to only change at these points but gives a good foundation for working with the three major device types.

使用这些断点并不仅限于将设计更改为仅在这些点进行更改，而且为使用三种主要设备类型奠定了良好的基础。

For content-based tweaking of the design (ie: when the content starts to look broken, unbalanced, or doesn’t quite fit) you can then use tweakpoints to nudge elements around and polish the details of your project.

对于基于内容的设计调整(即：当内容开始看起来不完整，不平衡或不太合适时)，您可以使用调整点来微调元素并完善项目的细节。

/* tweak position of share button */
    @media screen and (min-width: 1150px;) {
      margin-right: 1em;
    }

### 提示3：将`em`或`rem`用作断点单位 **(**Tip 3: Use `em` or `rem` as your breakpoint units**)** ###

Instead of `px`, use one of these relative units for better scalability if the user zooms the page or increases the size of the text. As an example, my major breakpoints above would look as follows when sized in ems.

如果用户缩放页面或增加文本的大小，请使用这些相对单位之一代替`px`以获得更好的可伸缩性。 例如，以ems设置大小时，我上面的主要断点如下所示。

/* 500px / 16px = 31.25em */
    @media screen and (min-width: 31.25em;) {}
    
    /* 800px / 16px = 50em */
    @media screen and (min-width: 50em;) {}
    
    /* 1200px / 16px = 75em */
    @media screen and (min-width: 75em;) {}

> 翻译自: [https://www.sitepoint.com/atoz-css-media-queries/][https_www.sitepoint.com_atoz-css-media-queries]

[here]: https://www.sitepoint.com/atoz-css-screencast-media-queries
[M2-01]: /images/20221123/a3e36030c735469e9edc262460358e2b.png
[https_www.sitepoint.com_atoz-css-media-queries]: https://www.sitepoint.com/atoz-css-media-queries/