EMs / REMs for typographical elements or wrappers or those you want related to the typography. I’m not sure we should be using px for anything these days.Maybe I am the odd one out here, but I use a system as follow…To each their own, but I’m curious why people use all of the above methods, to me they seem unneeded? The answer we are looking for is a @mixin. I love this clean separation. You have more control over presentation and are taking the default text size out of the equation.Great solution to media query syntax, too! In Bootstrap terms, I refer to the breakpoint above (768px) as sm.. The only reason to choose Sass over Stylus is if you reeeeeeaaaally love writing loads of extra curly braces, colons, semi-colons and the word “@mixin”.This syntax not only clearly defines its intent to style the component for “tablet” breakpoint, but also adds an extra requirement at the same time.I have to admit I’d be one of those that would like to see a class and all its breakpoints in the same file :pIn main.scss, I load general.scss which has styles required in all cases. This isn't possible with SASS, but it is possible with CSS variables (or CSS custom properties).The only drawback is browser support – but there's actually a PostCSS plugin - postcss-css-variables - that "flattens" the use of CSS variables (which gives you support for older browsers, too). Nicely done.These breakpoint files only contain CSS overrides, no base styles, and of course only overrides to that relevant breakpoint. Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. You can still do this with a mixin very simply…Thanks for sharing and for the detailed explanation.Real front-end developers usually don’t want to rely on a framework like bootstrap all the time. Media queries are case-insensitive.A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. I tried a few solutions. To go around this limitation we must find a way to include a collection of rules and sub-rules within a class inside a media query. Hi! Instead of hardcoding the names of the breakpoints in the mixin, I used a multidimensional map to declare and label them.Also, some devices report a higher font size than 16px and if that’s the case they will also see the responsive site because of the em-based MQs.I started using this mixin right away.
All of them eventually failed to cater for everything I needed to do in an elegant way. When the viewport is greater than or equal to 1024 pixels, the font size is 20 pixels.Right away, you should be struck by how much code is required to do something as simple as responsive typography. Highly recommend reading this blog post – it’ll probably change your mind entirely. Your message has been sent to W3Schools.Use a lightblue background color if the orientation is in landscape mode:Media queries can also be used to change layout of a page depending on the orientation of the browser. The bigger they are, the less responsive in fact the design is.But what happened to letting content define the breakpoints?The zoom issue with px-based media queries problem was a problem in Chrome that’s long been fixed. I use it for projects where I’m flying solo. Thank you so much for this work Eduardo.Sometimes you don’t have the luxury of knowing the content. I bet that the ordinary CSS syntax is better in this case.I’m a fan of Dmitry’s syntax, so my solution was inspired by it.
In fact, just from the size of those “sub” SCSS files you can see the quality of your design. In Responsive Web Design in Sass Part 2, I illustrated how to write some nicely abstracted media query systems using @content blocks in mixins. Next, also in main.scss, but below the general import I have all breakpoints listed, where each criteria imports the “sub” SCSS file for that specific breakpoint.I like how your solution works with SCSSAs said, I like this approach because I never see media queries anywhere, I never duplicate them.