AtoZ CSS: Creating Responsive Design with Media Queries

Key Points

• Avoid using device-specific breakpoints when creating responsive designs. Instead, set the primary breakpoints and secondary fine-tuning points that are approximately the size of most phones, tablets, and desktop/laptop devices.
• Use em or rem as breakpoint units instead of pixels for better scalability. This will help if the user scales the page or increases the text size.
• CSS media queries are a powerful tool for creating responsive designs. They allow you to apply different styles to different devices with different screen sizes. However, avoid using them to locate specific devices, as this can lead to maintenance nightmare. Instead, focus on creating responsive designs that work for all screen sizes.

This article is part of the AtoZ CSS series. See the complete screenshots and transcripts of media queries here.

Welcome to our AtoZ CSS series! In this series, I will explore different CSS values ​​(and properties), each starting with different letters of the alphabet. We know that sometimes screenshots are not enough, so in this article I have added a new quick tip/course about media queries.

M Representative Media Query

I guess the vast majority of web designers and developers are now familiar with the concept of responsive design. If not, check the media query screenshot.

Since responsive design is very popular, it is a great place to learn some tips that can improve the way we develop websites and applications for a variety of devices. Here are some CSS tips to help you.

Tip 1: Do not use breakpoints for specific devices

Hope this goes without saying, but just in case you need a reminder or haven't encountered such best practices before, I think it's worth reiterating.

Breakpoints for specific devices are easily identified in your code through media queries as shown below (add comments for increased clarity):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

These breakpoints are set for Apple devices and have "magic number" values, such as 768px or 1024px.

What if the user's window is 1025px or 1023px?

The media query will not take effect and the style of the device size will not be applied.

Sometimes you may need very specific values ​​for breakpoints (more on this later), but it seems to me that seeing breakpoints for these specific devices is a code odor.

So what should you do?

Technique 2: Set the main breakpoint and the secondary fine-tuning point

When working on responsive projects, I tend to set arbitrary integer breakpoints that are about the size of most phones, tablets, and desktop/laptop devices.

I tend to use the following main breakpoints (although sometimes this may change depending on the project):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

Using these breakpoints does not limit the design to change only at these points, but rather provides a good foundation for using three main device types.

For content-based design tweaks (i.e., when the content starts to look damaged, unbalanced, or not fit well), you can use fine-tuning points to adjust elements and polish the details of the project.

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

Tip 3: Use em or rem as breakpoint unit

Don't use px, but use one of these relative units so that if the user scales the page or increases the text size, you can get better scalability. For example, when I resize using em units, the main breakpoint above is as follows.

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

FAQs about CSS media queries and breakpoints (FAQ)

What are the best practices for setting CSS breakpoints?

CSS breakpoints are essential for creating responsive designs. They allow layouts to change at predefined points, i.e. provide different layouts for different screen sizes. Best practices for setting CSS breakpoints include starting with a moving layout first and then working upwards step by step. It is also recommended to use em or rem units instead of pixels as breakpoints, as they are more flexible and easier to access. Finally, avoid using too many breakpoints. Stick to standard sizes for mobile devices, tablets and desktops.

How to use CSS media queries for responsive design?

CSS media queries are a powerful tool for creating responsive designs. They allow you to apply different styles to different devices with different screen sizes. You can use them in CSS using @media rules, media features conditions such as max-width or min-width, and the CSS styles you want to apply.

What are the standard CSS breakpoints for responsive design?

The standard CSS breakpoints for responsive design are usually as follows: 320px for mobile devices, 768px for tablets, 1024px for tablets and 1200px for large desktops. However, these are not rigid regulations and can be adjusted according to the specific needs of the design.

How to test my CSS breakpoint?

You can use the checking tool in your browser to test your CSS breakpoints. This tool allows you to simulate different screen sizes and see how your layout responds. Additionally, you can use online tools like BrowserStack or responsive design testing websites to test on different devices and screen resolutions.

Can I use CSS media queries to locate specific devices?

Yes, you can use CSS media queries to locate specific devices. However, this is not usually recommended as it can lead to maintenance nightmare. Instead, focus on creating responsive designs that work for all screen sizes.

How to change font size using CSS media query?

You can use CSS media query to change the font size based on the screen size. For example, you might want to add font size to a larger screen for greater readability. You can do this by defining a media query with the desired screen size and then setting a new font size.

What is the difference between min-width and max-width in CSS media query?

and min-width in max-width in CSS media queries refer to the minimum and maximum viewport sizes that the style within the media queries will apply. min-width is used to apply styles to any viewport size greater than the specified value, while max-width is used to apply styles to any viewport size less than or equal to the specified value.

Can I use CSS media queries with JavaScript?

Yes, you can use the window.matchMedia() method to use CSS media queries with JavaScript. This method returns a MediaQueryList object that represents the result of a specified CSS media query string, which can then be used to apply different JavaScript features based on the screen size.

How to use CSS media query to process high-resolution screens?

You can use the resolution media feature to process high-resolution screens using CSS media queries. This feature allows you to apply styles based on the pixel density of the screen. For example, you might want to provide higher resolution images for high-density screens to ensure they look sharp and sharp.

Can I use CSS media query to detect dark mode?

Yes, you can use CSS media queries to detect if the user has set their system to dark mode. You can use the prefers-color-scheme media feature to achieve this. This feature allows you to apply different styles according to the user's preferred color scheme (i.e., light or dark colors).

The above is the detailed content of AtoZ CSS: Creating Responsive Design with Media Queries. For more information, please follow other related articles on the PHP Chinese website!