CSS媒体查询正确大小

Question

Im developing a site using media queries. the ones that im using are this ones:

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

the problem that i have is that there are certain screen resolutions in laptops that made the screen look like this:

As you can see. The navigation section overlaps the main logo and the letters and the bottom go over the main navigation menu. This happens basically on laptops screens that have a very big width and small height. Is there any way that i can target this resolution with media queries?

Answer 1

You have this:

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

You can do something like this in addition:

@media screen and (min-width: 800px) and (max-width: 900px) {

And just put the elements you need to target inside the media-query. You can have as many media-queries as you'd like and target only the elements you need to.

It may be too late now, but I would recommend using min-width only in the future for most of your media-queries so you aren't reproducing some of the same code.