howto: responsive design               rev 10 dec 2022

> general | debugging | how-tos | 


.......................................................
general:

  * Understanding the elements of responsive web design
      https://www.webfx.com/blog/web-design/understanding-the-elements-of-responsive-web-design/

  * A Practical Guide to CSS Media Queries
      https://stackdiary.com/css-media-queries/
      dec 2022
      Discussion:
        https://news.ycombinator.com/item?id=33921023


.......................................................
Debugging:
    see file.

....................................................... 
How-tos:

......................... 
images:
  see file in folder.

......................... 
tables:
  see file in folder.

.......................................................
viewport

  <meta name="viewport" content="width=device-width, initial-scale=1">
  or
  <meta name="viewport" content="width=device-width">

  * https://www.w3schools.com/css/css_rwd_viewport.asp
  * https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  * https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  * https://www.quirksmode.org/mobile/viewports2.html
  * https://stackoverflow.com/questions/11006812/html5-boilerplate-meta-viewport-and-width-device-width
  


.......................................................
techniques:

 
  .........................
  Techniques for sizing:

    * "Trojan horse": Good ol’ font-size, hooked up to EM based units.
          https://medium.com/@simurai/sizing-web-components-8f433689736f


    * An idea:
        px at the Root, rem for Components (Modules), em for text Elements 
        At a certain medium size, everything looks fine. Scaling up,
        you can get to a point where the main articles are a good
        big size, but the sidebar stuff doesn't need to be that
        big. With this system it would be easy to target them and
        notch them back down. Scaling down, those sidebar modules
        get a bit too small too fast, so you could notch them back
        up easily. There might even be sizes where you equalize
        things because you've gone single column (or the like).
	       -- https://css-tricks.com/rems-ems/

    * px at document level:
        Setting your font-size at document level using an absolute
        unit overwrites the user’s browser settings --
        safe to say this is a bad practise.
        Instead, use a relative unit, like so: 
           html { font-size: 100%; }.
	       -- comment - https://css-tricks.com/rems-ems/

Once rem is available, I think it wrong to use px for anything else than borders or seperators. It should not be used for fonts anymore. My rational :

Rem makes it possible to handle both : browser zoom && user font-size setting.
– with zoom we want to make everything bigger.
– with font-size change, we want only the fonts bigger.

To make only the fonts bigger mean that the layout wont get larger or narrower.
When the font-size setting is changed then all “em” sized stuff are changed, but not the rems.

From that I have the following basic strategy :
– em for fonts and anything that is relative to fonts.
– rem for widths. All the stuffs that shouldn’t get change when the user font-size is changed. So generally it is the layout width, the columns and blocks width. Generally, we want the container to expand down, but no get larger.
-px almost bannished, and used only for borders, because we want usually round numbers for those.

Super simple strategy, and works well for me on IE9+ browsers.
Also it opens up the doors for manipulating the font-size programatically.
	       -- comment - https://css-tricks.com/rems-ems/ [2014]


SZRImaging
Permalink to comment# April 9, 2014

rem, by my understanding, just makes doing the math easier. A rem is always based off of the HTML size, if I remember correctly, so no mater how many elements in you are nested, it behaves the same and predictably. Think of it as declaring a scope for what em uses to base it’s math off of. Where as, nesting em can start to have unwieldy consequences as you nest more and more elements.

In simple sites, a relative non-issue, but in some of the more complicated ones managed by lots of people, em becomes a real pain.
	       -- comment - https://css-tricks.com/rems-ems/ [2014]


Rems for text
Ems for things that have a relationship to that rem (eg padding on a button should be relative to the text size of the button) also ems for margins on text based things
% for layout
% or PX for gutters/margins on layout elements – Gutters between columns for example have no relationship to the size of a font.
	       -- comment - https://css-tricks.com/rems-ems/ [2014]


 don’t apply font-size changes to containers – only to elements themselves. That way you’re alway calculating on the base HTML font size – and you could achieve a lot of the same overall flexibility that way to change the base and have it ripple across.
	       -- comment - https://css-tricks.com/rems-ems/ [2014]

	* discussions:
	  https://css-tricks.com/rems-ems/

	

.......................................................
root element - :root - the html element:

  "The HTML <html> element represents the root (top-level element) 
   of an HTML document, so it is also referred to as the root element."
     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html

  "The :root CSS *pseudo-class* matches the root *element* of a tree 
       representing the document. 
   In HTML, :root represents the <html> element and is identical to the selector html, 
   except that its specificity is higher."
     https://developer.mozilla.org/en-US/docs/Web/CSS/:root

     https://css-tricks.com/almanac/selectors/r/root/

   * Can use :root inside media queries as well.
        https://www.madebymike.com.au/writing/using-css-variables/


.......................................................
html vs body

	The HTML element is effectively the viewport (browser window
	visible area) the body element is the actual content of
	the page.

        1. The html and body elements are distinct block-level
        	entities, in a parent/child relationship.

        2. The html element's height and width are controlled by the browser window.

        3. It is the html element which has (by default)
        	overflow:auto, causing scrollbars to appear when needed.

        4. The body element is (by default) position:static, which
        	means that positioned children of it are positioned relative
        	to the html element's coordinate system.

        5. In almost all modern browsers, the built-in offset from
        	the edge of the page is applied through a margin on the
        	body element, not padding on the html element.

    The HTML root element (<html>) represents the root of an HTML
    or XHTML document. All other elements must be descendants of
    this element.

    The HTML Body (<body>) element represents the main content of
    an HTML document. There is only one element in a document.

  -- https://stackoverflow.com/questions/23560084/css-body-width-100-percent#answer-23560156

  http://phrogz.net/css/htmlvsbody.html

  "The phrogz.net article is simply wrong. That's really not how
  	it works at all. The html element is a block-level element which
  	can be styled pretty much like any other block level element
  	(including applying display:inline; it you so wish!)

  "Your page is painted on a canvas of (logically) infinite dimensions
	which has an origin at point (0, 0). The browser has a viewport which
	shows an area of the canvas. There exists a rectangular block called
	the Initial Containing Block whose top left hand corner is at (0, 0)
	and has a height and width equal to that of the viewport. The root
	element's position and dimensions can be specified relative to the
	Initial Containing Block, just as any other block element's position
	and dimensions can be specified relative to its containing block.
  -- https://stackoverflow.com/questions/18160174/css-root-element-margin


.......................................................
Sizing and font-size:

    * percent or px in html/body ?
        actually the parent of body is html. so body { font-size: 100%; } 
          will be 100% of the html's font size, not the
          browser default. Usually these are one in the same, though,
          https://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what

    * leave the body font-size alone entirely, 
        just define everything in ems in the elements.
        https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html
            [2012]
        (So i'm thinking, just to be explicit, define as 100%.
          but again - for html, or in body, element?

        Something to check:
        "The value of 1em, when used in a CSS3 Media Query such as @media (min-width: 20em), is unaffected by the font-size of the body element in most browsers. This means that if we change the font-size of the body to something other than 100%, we will need to calculate em values differently when they're used in a media query than in a CSS property value. "
        https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html
            [2012]

    * how big is an em?
        The default base font size is usually 16px.
            so 1em usually equals 16px.
            .5em is half of 1em, so could be 8px.
        BUT 
          An em is relative to font-size of containing (for a font), 
                or of parent (for a block) (see below).
        https://www.lifewire.com/how-big-is-an-em-3469917

        You can use it both horizontally and vertically.
        The use of ems for all design elements ensures scalable designs. 
          https://www.w3.org/Style/LieBos3e/em
          

    * what are the measurement units?

		Px are fixed. browser user can't make smaller/larger.
			think of people with visual difficulties.
            - The default base font size is usually 16px.
            - "A pixel has nothing to do with a real pixel on your screen. 
                It's actually an angular measurement."
            - "Devices do try to normalize the physical size that "1px" is 
                 despite their screen density.
               https://css-tricks.com/why-ems/
            - “Pixel units are relative to the resolution of the viewing device, 
                (most often a computer display)."
                http://inamidst.com/stuff/notes/csspx

		Em  
            for font-size: relative to the font-size of the parent element.
            for blocks: relative to font size of the containing element 
            - in the stylesheet and in the user font-size setting.
			- can get problematical when nested.
            - you can set margin, padding, width, height, even border-radius,
                with ems. it works.
		Rem - relative to font-size of the "root element" only.
                (meaning ... html?  body?  :root? )
            - not affected by the change of the user font-size setting. 
            - (and there is no compounding)
            https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
		percent 
            for font-size: relative to the parent font-size. 
            for blocks: relative to the containing block
            - usually the body, a div, or a table, 

        https://www.w3schools.com/CSSref/css_units.asp
        https://www.w3.org/Style/Examples/007/units.en.html
        https://www.sitepoint.com/power-em-units-css/

    * percent or em (or rem?) ?
		it looks like (below) everybody is using ems. not seeing
		anything about percents.
	
		http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths
        https://blueprintdigital.com/font-sizes-in-responsive-design/
        http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths
        https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
        https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/


.......................................................
dynamic css variables:

    * https://www.madebymike.com.au/writing/using-css-variables/
    * https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
    * https://codepen.io/Ash/pen/KVvZoP
    * https://codepen.io/Yuschick/post/getting-dynamic-with-css-variables-media-queries

    * css variables can only be used in property and element values - so far. [2018]
        (they are working on expanding them, so they could be used in e.g., media queries.

    For now, we can do this:
    * Getting Dynamic with CSS Variables and Media Queries
		Redefining variables dynamically in the css.
        https://codepen.io/Yuschick/post/getting-dynamic-with-css-variables-media-queries
        Daniel Yuschick [12 oct 2017]
        CSS variables are ‘living’ values that can change with their environment. 
          > A variable’s value can update based on @media queries.
          > That new value will apply throughout the project wherever it is being used.

// Example:
:root {
  --max-input-width: 250px;
}
@media screen and (min-width: 750px) {
  :root {
    --max-input-width: 500px;
  }
}
    "Now, as I scale my app between various breakpoints (because
    that's exactly what casual, everyday users do) my :root-scoped
    variables update and cascade down with their latest value."

    This means you don't have to redefine, say, each input width in
    each media query. You just redfine the variable, and it will
    be changed in the definition wherever that variable is used,
    throughout the stylesheet.

    This. is. cool. [oct 2019]




_______________________________________________________
begin 21 aug 2018
-- 0 --