css - Nesting Media Queries -
by default want give body element green border. on device supports retina display want check size first. on ipad want give body red border , on iphone want give blue border. nesting media queries doesn't work:
body { border: 1px solid green; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (max-width: 768px) , (min-width: 320px) { body { border: 1px solid red; } } @media (max-width: 320px) { body { border: 1px solid blue; } } }
no. need use and
operator , write 2 queries. can, however, in scss, compile css, combine them unfolding them , using and
operator.
this common problem, , once first wrote less or scss, didn't ever want go writing long-hand.
long-handed css:
@media (-webkit-min-device-pixel-ratio: 2) , (max-width: 768px) , (min-width: 320px), (min-resolution: 192dpi) , (max-width: 768px) , (min-width: 320px) { body { border: 1px solid red; } } @media (-webkit-min-device-pixel-ratio: 2) , (max-width: 320px), (min-resolution: 192dpi) , (max-width: 320px) { body { border: 1px solid blue; } }
nesting queries may work, support varies across browsers.
Comments
Post a Comment