Geek Answers Handbook

CSS Media Requests Overriding Each Other

Thanks, Qaru for the help. I have custom CSS that I use to tighten the design. I continue to encounter this problem if, if I changed something in one media request, say for iphone 6, this change will then affect another device, say, iphone 5. This became a problem when I constantly adjust without end . Here are my @media intercept points that I use.

/* IPHONE 6 PLUS */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { } /* IPHONE 6 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { } /* IPHONE 5s */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { } /* IPAD LAYOUTS */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* IPAD LANDSCAPE */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { }

Any help would be very helpful.

+8
html css iphone responsive-design wordpress
source share
2 answers

I agree with Birdman, and you should consider the mobile approach. However, Mobile in the first place means that the smallest device size is completely outside of any media query. The next size will start the first media request. You only need a minimum width, as these new styles will be in addition to the basic styles, rather than overwriting them. Each media request created will continue to be combined with those already called.

And instead of worrying about the iPad, this or the tablet that ... worries about when your design elements start to look bad. All major browsers have smart enough emulators for testing in different device sizes.

Here is a good article on the pros and cons. I always encode a mobile phone and never worry about style conflicts unless I specifically do this :)

https://codemyviews.com/blog/mobilefirst

+4
source share

When the width of the device falls between the range of media queries, stylization is applied. Therefore, if the width of the device is 500 pixels, it will first have a 6plus style, which will then be canceled using 6 styles, and then 5 seconds. As a rule, it is not recommended to try to adapt CSS for a specific device, but if you want to, you need to make sure that none of the ranges overlap, or they will simply be overridden by which style will be the last.

+2
source share

More articles:


All Articles