^^Responsive Web Design.

  1. originale: Serie geometrica quadrati annidati.
  2. Carattere scelto per il sito.
  3. Appunti di programmazione per migliorare.
  4. w3schools/html_responsive
    1. css3_pr_mediaquery.php
  5. developer.mozilla/Viewport_meta_tag A pixel is not a pixel
  6. quirksmode/2010/04/a_pixel_is_not_a_pixel.html

 

  1. https://stackoverflow.com/questions/26222724/line-breaks-causes-spaces-in-the-html
  2. https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space
    1. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace

Pointless use of <small> or <font size=>

If we wanted our text to be unreadably tiny, we'd have told our browser to display it that way. This one mugs viewers with 20" and 21" screens particularly hard; since most fonts are scaled for 72dpi they're already 30% smaller than they ought to be at 100dpi. Anybody who use these tags for running text should be compressed by 30% themselves, slowly, and preferably in a machine with big nasty spikes.

ref: http://www.catb.org/~esr/html-hell.html

 

Detect mobile

@media  screen and (hover: none) {

/* Regular CSS rules here*/

}

ref: https://stackoverflow.com/questions/42025632/how-to-detect-only-with-css-mobile-screens

Detect desktop

@media (pointer: fine), (pointer: none) {
	/* desktop */
}

ref: https://habr.com/en/sandbox/163605/

 

One of the official CSS3 Candidate Recommendations defines these
Absolute lengths:

unit    definition
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm = 96px
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

Therefore 1cm is roughly equal to 37.80px. If a device's screen width measures 10cm, then in pixels this is roughly 378px.

ref: stackoverflow/using-cm-in-responsive-media-queries

Relative Lengths

Unit Description
em Relative to the font-size of the element
(2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*

vw = viewport width
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

ref: w3schools/css_units

 

width="100"

style="width:33vw"

style="width:33%"

style="width:33vmax"  non va

style="width:33vmin"  non va

 

 

p paragraph, stile generale

quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici 

style="font-size:2.5vw;"

quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici  quadrati concentrici