city:viewport

What you really wanted when you asked for viewport units
▻https://github.com/colingourlay/root-units

“Viewport units were an awesome idea. They let us set CSS properties to lengths that are proportion to the viewport’s width, height, or the min/max of the two. There’s a small caveat that’ll trip you up sooner or later though : they don’t play nicely with scroll bars.”

#viewport_units_fix_100vh_JavaScript_clevermark

#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-scatter-plot-font-size-opt.png

That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.

The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:

https://www.smashingmagazine.com/wp-content/uploads/2017/05/4-least-squares-fit-opt.png

You can use the trendline equation like this:

h1 {
 font-size: calc({slope}*100vw + {y-intercept}px);
}

Once you find your slope and y-intercept you just plug them in!

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

Viewport Unit Based Typography
▻http://zellwk.com/blog/viewport-based-typography
#viewport_units_typography_font-size_CSS_RWD

Comprendre le #Viewport dans le Web mobile - Alsacreations
►http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de « fenêtre » réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.

Comprendre la notion de viewport est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « #Responsive Web Design ».

Comprendre le #Viewport dans le Web mobile - Alsacreations
►http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Pour résumer, Safari mobile sur iPhone 4 va afficher par défaut les pages web dans une fenêtre de 980px de large au sein des 320px de largeur qu’il croit avoir… bien qu’il en ait physiquement 640px.
Une image de 320px de large va, par conséquent, occuper par défaut 1/3 de la largeur de l’écran. Tordu, non ?

Responsive Design for Apps — Part 1
►http://blog.cloudfour.com/responsive-design-for-apps-part-1

Model Type Size Display Resolution Viewport
W H W H W H
Samsung Galaxy Note 2 Phone 3.17” 5.95” 5.5” 720 1280 360 640
Motorola RAZR HD Phone 2.67” 5.19” 4.7” 720 1280 360 519
Motorola Atrix HD Phone 2.75” 5.26” 4.5” 720 1280 540 812
HTC Droid DNA Phone 2.78” 5.5” 5” 1080 1920 360 640
Nexus 7 Tablet 4.72” 7.81” 7” 800 1280 600 793
Kindle Fire Tablet 4.72” 7.44” 7” 600 1024 600 819
Kindle Fire HD Tablet 5.4” 7.6” 7” 800 1280 533 731

#mobile