Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people are at a loss about how to reasonably select the partition point of CSS media query in responsive development. therefore, this paper summarizes the causes and solutions of the problem. I hope you can solve this problem through this article.

In the responsive development, the CSS media query segmentation point is reasonably selected and translated from David Gilbertson's The-100%-Correct-Way-To-Do-CSS-breakpoints. It may seem like a mouthful, but the core is to give the right way to name and write Media Query.

When reading this article, I hope you can forget what you already know about CSS and Web development. What we are talking about today is not so complicated and esoteric. If you think you are ready, we can start with the following simple dot diagram:

The above points are distributed at random, on and off, near and far, and our problem is how to divide these points into five groups. In the simplest way, we can set up a separation zone between those two points that are far apart and divide them into different combinations.

The above circles are all drawn by me, and of course you can choose other division methods, such as dividing the two rightmost points into a group. In fact, there is no wrong answer to this question, but if you divide it in the following way:

Does it look weird? I am not asking this question out of nothing. When we need to set up different CSS styles for different sizes of screens, some people will like to use the most common size as the segmentation point, that is, 320px focus 768px and 1024px.

I don't know if you have ever heard or said the following words: is the medium screen divided according to 768px? Or should 768px be divided into medium-sized screens? However, this size is the size of the iPad horizontal screen, so it should be regarded as a big screen, right? Well, the big screen is 768px and above? And then 320px left and right is the small screen? What about 319px? To distinguish between ants? The purpose of this article is to discuss how to select the appropriate partition point and separation group.

Select the appropriate separation point

You can draw these circles in kindergarten, and I'm going to elaborate on them with a rectangular metric:

Here we choose 600pxMagne 900pxMagne1200px and 1800px as the split points. These separation groups include the 14 most common models:

By combining these two images, we can come up with the following one that is more suitable for your boss, designer, developer, and tester:

Name your groups in a more intuitive way

If you prefer, you can also use Papa-Bear and Baby-Bear to refer to your selected split point. However, when you and the designer discuss the display effect of the website on different screens, you must hope that both sides will be able to form perceptual and intuitive perception in their minds. If you use the vertical size of the tablet to describe it, is it iPad or Surface? Especially now that the phone is getting bigger and the tablet is getting smaller and smaller, it is very difficult for you to divide the size with a simple tablet or phone. But the good news is that Apple is no longer making new products, they just keep removing buttons and headphone ports from their current products. It is difficult for me to give any suggestions here. I can only say that there is a lot of communication between designers and products.

Declarative setting responsive layout

Declarative concepts are very popular at the front end. For example, the famous React is a typical declarative component library. The application of declarative programming to CSS means that CSS should define What it wants, not How it should. One of the confusion about partition points that we discussed above is that they represent a range at the same time. For example, the definition of $large:600px is confused when the word large itself represents a range value. Therefore, in a specific component or tag, we should hide the specific size settings, such as:

@ mixin for-phone-only {@ media (max-width: 599px) {@ content;}} @ mixin for-tablet-portrait-up {@ media (min-width: 600px) {@ content;}} @ mixin for-tablet-portait-only {@ media (min-width: 600px) and (max-width: 899px) {@ content;}} @ mixin for-tablet-landscape-up {@ media (min-width: 900px) {@ content } @ mixin for-tablet-landscape-only {@ media (min-width: 900px) and (max-width: 1199px) {@ content;} @ mixin for-desktop-up {@ media (min-width: 1200px) {@ content;}} @ mixin for-desktop-only {@ media (min-width: 1200px) and (max-width: 1799px) {@ content } @ mixin for-big-desktop-up {@ media (min-width: 1800px) {@ content;} / / usage. My-box {padding: 10px; @ include for-desktop-up {padding: 20px;}}

You will find that I highly recommend using the-up and-only suffixes in the above definition, where the style is used:

.phone-only {@ include for-phone-only {background: purple;} .tablet-portait-only {@ include for-tablet-portait-only {background: purple;} .tablet-portrait-up {@ include for-tablet-portrait-up {background: purple;}} .tablet-landscape-only {@ include for-tablet-landscape-only {background: purple;} .tablet-landscape-up {@ include for-tablet-landscape-up {background: purple }}. Desktop-only {@ include for-desktop-only {background: purple;}. Desktop-up {@ include for-desktop-up {background: purple;}} .big-desktop-up {@ include for-big-desktop-up {background: purple;}}

However, this approach is not so flexible when a large number of custom media queries are needed, and we can provide more fine-grained control:

@ mixin for-size ($size) {@ if $size = = phone-only {@ media (max-width: 599px) {@ content;}} @ else if $size = = tablet-portrait-up {@ media (min-width: 600px) {@ content;}} @ else if $size = tablet-portait-only {@ media (min-width: 600px) and (max-width: 899px) {@ content } @ else if $size = = tablet-landscape-up {@ media (min-width: 900px) {@ content;} @ else if $size = = tablet-landscape-only {@ media (min-width: 900px) and (max-width: 1199px) {@ content;}} @ else if $size = desktop-up {@ media (min-width: 1200px) {@ content } @ else if $size = = desktop-only {@ media (min-width: 1200px) and (max-width: 1799px) {@ content;}} @ else if $size = = big-desktop-up {@ media (min-width: 1800px) {@ content;} / usage. My-box {padding: 10px; @ include for-size (desktop-up) {padding: 20px;}}

This approach can naturally achieve the desired results, but if a careless developer passes in an undefined scope name, it will be awkward for a long time, so we recommend that you pass in a specific size instead of a certain range:

@ mixin for-size ($range) {$phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @ if $range = = phone-only {@ media (max-width: # {$phone-upper-boundary-1}) {@ content;} @ else if $range = = tablet-portrait-up {@ media (min-width: $phone-upper-boundary) {@ content } @ else if $range = = tablet-portait-only {@ media (min-width: $phone-upper-boundary) and (max-width: # {$tablet-portrait-upper-boundary-1}) {@ content;} @ else if $range = = tablet-landscape-up {@ media (min-width: $tablet-landscape-upper-boundary) {@ content } @ else if $range = = tablet-landscape-only {@ media (min-width: $tablet-portrait-upper-boundary) and (max-width: $tablet-landscape-upper-boundary-1px) {@ content;} @ else if $range = = desktop-up {@ media (min-width: $tablet-landscape-upper-boundary) {@ content } @ else if $range = = desktop-only {@ media (min-width: $tablet-landscape-upper-boundary) and (max-width: $desktop-upper-boundary-1px) {@ content;} @ else if $range = = big-desktop-up {@ media (min-width: $desktop-upper-boundary) {@ content;}} / / usage. My-box {padding: 10px @ include for-size (desktop-up) {padding: 20px;}}

After reading the above, have you mastered the method of how to reasonably select the partition point of CSS media query in responsive development? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.