This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side. Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly. Since it won’t work automatically you could do it by hand like … Read more
Let’s break down your examples one by one. @media (max-width:632px) This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. @media screen and (max-width:632px) This one is saying for … Read more
That’s by design of CSS — Cascading Style Sheet. It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less … Read more
All three of these were helpful tips, but it looks like I needed to add a meta tag: <meta content=”width=device-width, initial-scale=1″ name=”viewport” /> Now it seems to work in both Android (2.2) and iPhone all right…
max-width is the width of the target display area, e.g. the browser max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen Same goes for max-height and max-device-height naturally.
After nearly a decade of work — with proposals, proofs-of-concept, discussions and other contributions by the broader web developer community — the CSS Working Group has finally laid some of the groundwork needed for container queries to be written into a future edition of the CSS Containment spec! For more details on how such a … Read more
IMO these are the best breakpoints: @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ } @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 phones (Android) */ } @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops … Read more
Responsive Images (different images in HTML for different situations) is an important one. Few important bits : Use of srcset attribute for switching between different versions of the same image. http://responsiveimages.org is a well of resources on this subject. Use of automation tools for imaging – One of my favorites is Grunt and here is … Read more
Every phone is different. There is no standard. To that end, your media queries should be designed with breakpoints in mind, not exact dimensions, to accommodate a wide range of devices in each of several categories. How exactly you do this is beyond the scope of this question, and too broad to be remotely adequately … Read more