Widths to use in media queries [closed]

2019-03-07 12:25发布

What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones? Are there any standard widths for these devices?

5条回答
可以哭但决不认输i
2楼-- · 2019-03-07 12:55

I'm looking everywhere for the best answer for this. Here what I found.

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for @ryanve. Here is the link.

查看更多
家丑人穷心不美
3楼-- · 2019-03-07 12:59

Try this Media Query it will help you

@media only screen and (min-width:1280px) {}

@media (min-width:1024px) and (max-width:1279px) {}

@media (min-width:768px) and (max-width:1023px) {}

@media (min-width:480px) and (max-width:767px) {}

@media screen and (max-width:479px) {}

@media only screen and (max-width:320px) {}

@media only screen and (max-width:767px) {}
查看更多
我想做一个坏孩纸
4楼-- · 2019-03-07 13:02

I find these are good breakpoints to start from but always test and tweak as you go. I'd also suggest using ems instead of px for dimensions for varied device dimensions and resolutions (reasons described here (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))

So the above queries would look like this:

@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:80.063em) { /* hi-res laptops and desktops */ }

There is also a nifty pixel to em calculator online here (http://pxtoem.com/) For those of you not as familiar, including myself.

查看更多
该账号已被封号
5楼-- · 2019-03-07 13:05

perfect media query

  @media (max-width:400px) {}
    @media (min-width:401px) and (max-width:599px) {}
    @media (min-width:600px) and (max-width:767px) {}
    @media (min-width:768px) and (max-width:950px) {}
    @media (min-width:951px) and (max-width:1050px) {}
    @media (min-width:1051px) {}
查看更多
Root(大扎)
6楼-- · 2019-03-07 13:09

Try this including retina

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
查看更多
登录 后发表回答