I have a question while studying the basics of media query.

Asked 6 days ago, Updated 6 days ago, 1 views

.pc{
    color: red;
    font-size: 50px;
    background-color: pink;
}
@media (min-width: 600px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
        background-color: yellow;
    }
}
@media (min-width: 100px) and (max-width: 599px) {
    .pc {
        color: green;
        font-size: 10px;
        background-color: gray;
    }
}

In this way, when you increase or decrease the site window,

599.??? Like this, 599. In the decimal part,

It returns to the original red and pink values for a moment.

I won't pay much attention to it or write it like this.

the 599 or decimal part connected solution that neatly?

css

2022-09-20 15:40

1 Answers

What you are asking is Media Query Breakpoints Design Best Practices. The approach you're taking now is, let's say, divide the area completely by the junction.

But usually, you don't divide the junction like above, but you divide the junction like below.

The key is to set a default value (rules that you'll apply by default, no matter how narrow a device is) and create larger and larger rules for the screen. This one-way cascading of rules solves the problem you're encountering - a collision in the width between 767 and 768 pixels. Plus, it's safe in many ways because you can define the default.

Similar stack overflow Q&A provides a best practice, so please refer to it.


2022-09-20 15:40

If you have any answers or tips


© 2022 pinfo. All rights reserved.