Please enable JavaScript.
Coggle requires JavaScript to display documents.
Css Responsive (layout and content (images (<picture> for solution…
Css Responsive
layout and content
text
fonts in rem
images
srcset
size
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
<picture> for solution
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction
menu
trade for portability
grid
use flex
tables
trade table for list
https://codepen.io/cnovac/pen/JQqRdd
flex ??
list
forms
media
in link / style / source tags
in css
device type
screen
print
all (default)
features
width
orientation
resolution
operators
and
or
not
only
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
units
fonts relative
rem
root element multiply (html)
em
element multiply (parent)
%
instead of px (but height)
height: auto
breakpoints
free
how to know
landscape x portrait
basics
tools
to find breakpoints
to test speed
to change devices
meta
name viewport
content
initial-scale=1.0
width=device-width
user-scalable=no
challenges
Prepare site to adapt
Change menu
Hero
Adapt text
Hide Image
Adapt Grid (flex)
Adapt images
Adapt table (trade for list)
Adapt list
Adapt forms