css media queries not working for certain resolutions -
i'm using css media breakpoints in order optimize fonts , such different devices. works except 2 of breakpoints in odd way.
i'm using google chrome developer console test of these. @media screen , (min-device-width: 1440px) , (max-device-width: 1919px)
device 1440px x 900px
width 1440.
however, media query work if set @media screen , (min-device-width: 900px) , (max-device-width: 1919px)
doesn't make sense me.
@media screen , (min-device-width: 320px) , (max-device-width: 500px) { /* works */ } @media screen , (min-device-width: 960px) , (max-device-width: 1023px) { /* works */ } @media screen , (min-device-width: 1024px) , (max-device-width: 1279px) { /* works */ } @media screen , (min-device-width: 1360px) , (max-device-width: 1439px) { /* works */ } @media screen , (min-device-width: 1440px) , (max-device-width: 1919px) { /* doesn't work */ } @media screen , (min-device-width: 1920px) , (max-device-width: 2499px) { /* works */ } @media screen , (min-device-width: 2500px) , (max-device-width: 3839px) { /* works */ }
try this: http://codepen.io/anon/pen/rvklom
i changed around values. there gaps in widths.
.test { display: table-cell; vertical-align: middle; text-align: center; height: 200px; background-color: #e41; color: #fff; font-family: helvetica; box-sizing: border-box; padding: 50px; width: 400px; } @media screen , (min-width: 320px) , (max-width: 959px) { .test::before { content: '320px - 959px'; } } @media screen , (min-width: 960px) , (max-width: 1023px) { .test::before { content: '960px - 1023px'; } } @media screen , (min-width: 1024px) , (max-width: 1359px) { .test::before { content: '1024px - 1359px'; } } @media screen , (min-width: 1360px) , (max-width: 1439px) { .test::before { content: '1360px - 1439px'; } } @media screen , (min-width: 1440px) , (max-width: 1919px) { .test::before { content: '1440px - 1919px'; } } @media screen , (min-width: 1920px) , (max-width: 2499px) { .test::before { content: '1920px - 2499px'; } } @media screen , (min-width: 2500px) , (max-width: 3839px) { .test::before { content: '2500px - 3839px'; } }
Comments
Post a Comment