Introducing Responsive #react Components
▻https://hackernoon.com/introducing-responsive-react-components-f6cd14976570?source=rss----3a814

https://cdn-images-1.medium.com/max/880/0*XmXA0975oYQNDFwl.png

TL;DR — You can render viewport specific components in React with a one-linerReact is awesome and the whole world agrees to it unanimously. Development is a whole lot faster and easier when we look at everything as components. Since everything is #javascript driven, React renders only the code that is necessary based on application’s state. It doesn’t matter if you have over a thousand components and tens of thousands of lines of code. If you lazy load your components, you load only what’s necessary for the user and I think that is the biggest win with using React.That being said, have you ever wondered what happens when you write media queries in your React codebase?You render elements that’s not supposed to be in a particular viewport and hide it using css.In this exampleimport React from (...)

#reactjs #npm #npm-weekly

Des media queries pour savoir si l’usager en est réduit à viser grossièrement avec ses gros doigts boudinés, ou s’il peut piquer précisément comme une abeille :

Using Media Queries For Responsive Design In 2018 — Smashing Magazine
▻https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018

@media (pointer:coarse) {
    .which-pointer::after {
        content: "You have a coarse pointer, are you on a touchscreen device?";    
    } 
}

@media (pointer:fine) {
    .which-pointer::after {
        content: "You have a fine pointer, are you using a mouse or trackpad?";    
    } 
}

#Gmail Update: A Closer Look at Google’s Rendering Refresh | Campaign Monitor
▻https://www.campaignmonitor.com/blog/email-marketing/2016/10/gmail-update-googles-rendering-refresh

https://www.campaignmonitor.com/assets/uploads/2016/10/Stocksy_txp8941bd1fdOB100_Medium_347003-2-1600x1066.jpg

#Google has started rolling out their recently announced updates to their range of #email clients. If you missed the big news, Google will now be supporting embedded stylesheets, including media queries, across all their clients, including Gmail on #Android, #iOS and #webmail, Inbox on Android, iOS and webmail, and Google Apps webmail (now renamed G Suite).

#web_design

Viewport Sized Typography with Minimum and Maximum Sizes
▻https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes

This Sass mixin makes use of media queries to define a minimum and maximum size for the font, in pixels. It also supports an optional parameter to serve as a fallback to browsers that don’t support viewport units.

#viewport_units_RWD_font_size_Sass_mixin_clevermarks

#Sass-mq/sass-mq · GitHub
▻https://github.com/sass-mq/sass-mq

A Sass mixin that helps you compose #media_queries in an elegant way. Tags: Sass media_queries #RWD #clevermarks

CSS Media Queries for iPads & iPhones | Stephen Gilbert
▻http://stephen.io/mediaqueries

Many times I’ve had to design #responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site’s content. Because of this, I’ve ended up with a somewhat large list of CSS #media_queries for typical devices over the past year or two.

I’ve posted these media queries to help designers & developers save some time searching. I’ll continue adding to the list as Apple (or another company that can sell a significant amount of products) releases them.

#rwd

Faut-il limiter le nombre de #Media_Queries ? (Sass and Media Queries)
▻http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

"Does combining the media queries have any actual performance improvements? Are people simply raising issue because they don’t like the way the output CSS looks? That’s a damn good question and one that Aaron also raised. As he put it, “Let’s ask science!”" Tags: Media Queries Responsive Web Design (RWD) #Sass #webperf

#Responsive_Web_Design_RWD_

Essential considerations for crafting quality #Media_Queries
▻http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries

“Learn what you need to know to set up media queries that maximize efficiency and robustness for your particular project. There are pros and cons to making your media queries embedded versus external, overlapping versus stacking your media queries, starting with mobile versus desktop styles, and using conditional comments versus JavaScript to add support for IE 8 and earlier versions.” Tags: Responsive Web Design (RWD) #bonne_pratique Media Queries #CSS

#Responsive_Web_Design_RWD_

#Chrome Web Store - #Responsive_Inspector
▻https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim

“Responsive Inspector is a simple Google Chrome #extension that allows viewing media queries of visited websites” Tags: Responsive Web Design (RWD) Responsive Inspector Chrome extension #audit #breakpoint

#Responsive_Web_Design_RWD_

css - Detecting #iPad / #iPhone using #media_queries - Stack Overflow
▻http://stackoverflow.com/questions/11680095/detecting-ipad-iphone-using-media-queries

I use the following media queries (defining splash images for web apps). It handles iPhone non-retina and iPhone 4/4s and both #non-retina iPad and #retina iPad (portrait and landscape).

Content Choreography | Trent Walton
►http://trentwalton.com/2011/07/14/content-choreography

Another thing I’ve noticed is that media queries are being used to significantly #redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.

Mouais. Il a raison sur le fond mais il faudra vraiment que les gens se rendent compte que tant qu’à faire du #responsive, il serait malin de virer les #webfonts pour des questions de bande passante, et forcer le #contraste pour des questions d’#accessibilité en mobilité notamment.

#mediaqueries #rwd

Using media queries from code | Document Object Model (DOM) | MDN
▻https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code?redirectlocale=en-US&redirectslug=C

Jouer avec les media queries depuis un script, par exemple :

var mq = window.matchMedia("(max-width: 640px)");
if (!mq.matches)
	alert('prout');

#css #media-queries #javascript #jquery

Combining meta viewport and media queries - QuirksBlog
►http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

« #mobile » "#webdev"

Device-Agnostic Approach To #Responsive #Web #Design | Smashing Coding
►http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design

how we can rely on media queries and breakpoints without any concern for devices.

plutôt convaincant comme approche

Boston Globe’s Responsive Redesign. Discuss. – Jeffrey Zeldman Presents The Daily Report
►http://www.zeldman.com/2011/09/15/boston-globes-responsive-redesign-discuss

#Responsive #design is not #CSS3 media queries, any more than “Hamlet” can be reduced to English grammar. (Yet without English grammar, there is no Hamlet.)

Citation mémorable, à graver dans le marbre.
#media-queries

Create an adaptable website layout with CSS3 media queries
►http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

#via_google_reader #css3 #webdesign #css #mobile #html5 #layout #tutorial