After a lot searching. I found my answer. – We don’t need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices. For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between … Read more
You could use a skewed and rotated pseudo element to create a responsive triangle under the link : DEMO (resize the result window to see how it reacts) The triangle maintains it’s aspect ratio with the padding-bottom property. If you want the shape to adapt it’s size according to it’s content, you can remove the … Read more
What are the rules for CSS media query overlap? Cascade. @media rules are transparent to the cascade, so when two or more @media rules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.1 What will happen, across all supporting browsers, at exactly … Read more
Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It’s different for every site. As long as the design flows well at each browser width, … Read more
You can exploit fact that trailing and line trailing white space automatically collapses: document.write( ‘word<b style=”background: red; outline: 1px solid blue;”> </b>’ .repeat(42) ); As you can see there are red spaces with blue outlines between words, but the very last and and two at line ends lack the red area because it’s width collapsed … Read more
To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this: // Media queries breakpoints // ————————————————– // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 1px; @screen-xs-min: @screen-xs; @screen-phone: … Read more
Another useful media feature is device-aspect-ratio. Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 375/667) {} iPhone 6 Plus: @media screen and (device-aspect-ratio: … Read more
On desktop operating systems, browser viewports are a fixed number of pixels wide, and web page content is rendered into them as-is. Starting with Safari on iOS (or whatever we were supposed to be calling iOS back then), mobile browser viewports have been “virtual”. Although the viewport may only take up (for example) 320 physical … Read more
TL;DR If you’re making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes. According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided. 8. Appendix … Read more
This is a pretty useful guide for mobile screen sizes. Great guide for stats on screen resolutions Google Analytics data on resolutions can be valuable as well, if you have access to it. Also, I would definitely recommend using device-width for your mobile sizes, unless you want users to see your mobile styles when they … Read more