From #1 and moving ahead:
I previously posted my journey into building a simple (no fuss or perplexity; for beginners) supermarket website. I had only used HTML & CSS to construct a straight forward, unornamented website. As per the modern craze in web development, all websites should appear dazzling on however small of a screen it may be viewed. I therefore persuaded my brain to review my code and add a couple of media queries as well as beautify the previous code to achieve my goals.
However, this section also never went by without upskilling my brain-content.
Key lessons
- Prefer using absolute units eg
cm
,mm
,in
,pt
,px
etc. for content to be printed to hardcopy. Avoid them to the most in responsive layouts. - Try to avoid setting fixed
width
inpx
,in
etc. especially for large elements e.g. large banner images,<section>
s or whatever forces a user to scroll horizontally. It may be tempting to initially satisfy your design by this, but always remember to replace with relative units such as---%
,rem
,em
,vw
,vh
. - Either set specific height & width (in relative or absolute units) to the parent
flex_container
, hence thenested_div
s occupy space variably (I call this technique ‘fixed-container’), or height and width of containers asauto
(flexible upto even zero) and hence fixed sizes ofnested_div
s determine the resultant size of theflex_container
(I call this techique ‘fixed-nested-divs’). Most used is ‘fixed-container’. - Always design mobile-first (unless majority of audience are desktop users). Write default styles for small screens first, and use media queries for larger screens. Avoid extra fluff in headers, navbars… for mobile screens. Use media queries to modify very few properties for larger screen sizes (
@media only screen and (min-width: 600px)
applies styles for screens’ width of 600px and above). - Use
(min-device-width: 400px)
instead of(min-width: 400px)
to check for device actual screen size instead of web document size. Styles under this are not affected by changing window size or by rendering another html file inside an html file by<iframe>
s. - Use different images on different screen sizes using
<picture>
, more so the same image but of different resolutions as well ot reduce load bundle e.g. can useurl('../assets/flowers-lg')
on large screens andurl('../assets/flowers-sm')
on phones. -
--em
when set onfont-size
means relative to parent element whileem
in other properties s e.g.width: 3em
means relative to font-size of current element. - Use
em
when you always want text to be certain size according to its immediate parent. Userem
in deep nesting scenarios when you want the size relative to fontsize of the root element (stays unchanged). - Properties commonly set with
em
andrem
: font-size, margin & padding. - Properties commonly set with
%
,vw
andvh
: width, height, postioning (fixed & absolute), flex-basis, margin and padding. - Classifications of design technqiues (can use any one or combine):
- Link diff stylesheets OR
- Media queries within CSS OR
- Flexible grids & css
column
+ Relative values &calc()
+ min & max
Please don’t hesitate to criticize and suggest edits 😘
Top comments (0)