Using Media Queries For Responsive Design In 2018 — Smashing Magazine


62 bookmarks. First posted by basemaly february 2018.


Don’t target devices, add breakpoints when the design breaks
It’s not all about pixels
Take extra care when reordering flex and grid items
Don’t forget vertical media queries
grid  responsive  css  mediaqueries 
21 days ago by iyoti
When creating your breakpoints, consider moving away from pixels. Line lengths becoming too long is a good indicator of the design “breaking” and requiring a breakpoint. A better way to indicate that than pixels is the em unit, as that will give a consistent result if the user has larger text that you expected.
9 weeks ago by suprada
A lovely article by @rachelandrew on using the responsive aspects of Flex and Grid to achieve things that we often assume only Container Queries can do.
web  flexbox  grid  responsive  mediaqueries  publishtobuffer 
february 2018 by sonniesedge
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
css 
february 2018 by natelandau
In this CodePen, I have examples of flexible Multicol, Flexbox and Grid components, all which resize and change their layout according to the space available.…
from instapaper
february 2018 by adamlogic
You might not need so many of them!

Also, there are new interaction ones (coarse/fine pointers, hover capability)
css  layout  webdesign  rwd  grid 
february 2018 by leereamsnyder
Using Media Queries For Responsive Design In 2018 via Instapaper http://ift.tt/2EI85Dk
IFTTT  Instapaper 
february 2018 by bishbashbosh
testing for hover and pointer types
css  rwd 
february 2018 by jshwlkr
Using Media Queries For Responsive Design In 2018
from twitter
february 2018 by nn
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign  mobileweb 
february 2018 by garrettc
Artículo que explica cómo hacer media-queries en 2018 ahora que hay flexbox y css grid
css  article  mediaquery  flexbox  responsive  cssgrid 
february 2018 by gorilas
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
fridayfrontend  css  grids  cssgrid  flexbox  layout  mediaqueries  responsive  rwd 
february 2018 by spaceninja
DON’T TARGET DEVICES, ADD BREAKPOINTS WHEN THE DESIGN BREAKS
css  responsive 
february 2018 by siggiarni
If you’ve ever made a layout with CSS, you probably know what BFC is. Understanding why it works and how to create one is useful and can help you to understand how layout works in CSS. Read a related article → Performance matters. via Pocket
read  pocket 
february 2018 by tricca
This article will take a look at the use of media queries for responsive design today, and also have a look at what is coming in the future.
css  responsive 
february 2018 by bloom
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
february 2018 by mfessler
In this CodePen, I have examples of flexible Multicol, Flexbox and Grid components, all which resize and change their layout according to the space available.…
from instapaper
february 2018 by elivz
If you’ve ever made a layout with CSS, you probably know what BFC is. Understanding why it works and how to create one is useful and can help you to understand how layout works in CSS. Read a related article → Performance matters. via Pocket
Pocket 
february 2018 by LaptopHeaven