10. VIEW PORT1/2
Viewport is a rectangular area that is being viewed.
On mobile devices, the default width is usually larger than
the actual screen size.
To build a mobile-friendly website, we should explicitly
specify width=device‑width.
< m e t a n a m e = " v i e w p o r t "
c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 . 0 " / >
11. VIEW PORT2/2
Name Description Value
width Viewport width Integer in pixels or device‑width
minimum-
scale
Minimum possible zoom
scale
Floating point between 0.0 — 10.0
maximum-
scale
Maximum possible zoom
scale
Floating point between 0.0 — 10.0
initial-
scale
Initial scale when the
page is loaded
Floating point between minimum‑scale
and maximum‑scale
user-
scalable
Can user zoom in/out? yesor no
12. CSS MEDIA QUERY
@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) {
/ * A p p l i e s w h e n w i d t h i s l e s s t h a n o r e q u a l t o 5 0 0 p x . * /
}
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) {
/ * A p p l i e s w h e n w i d t h i s g r e a t e r t h a n o r e q u a l t o 5 0 0 p x . * /
}
13. CSS MEDIA QUERY DETAILS 1/3
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x )
a n d ( m a x - w i d t h : 1 2 0 0 p x ) {
/ * A p p l i e s w h e n w i d t h i s i n 5 0 0 - 1 2 0 0 p x . * /
}
keyword only— No special effect on new browsers. Old
browsers will completely ignore the media query directive.
media type — all, screen, and print
14. CSS MEDIA QUERY DETAILS 2/3
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x )
a n d ( m a x - w i d t h : 1 2 0 0 p x ) {
/ * R u l e s f o r s c r e e n s w i t h 5 0 0 - 1 2 0 0 p x v i e w p o r t w i d t h . * /
}
MEDIA FEATURES
prefix — min, max
viewport — width, height, aspect‑ratio
device — device‑width, device‑height, device‑aspect‑
ratio
15. CSS MEDIA QUERY DETAILS 3/3
p { c o l o r : b l u e ; }
@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 7 6 8 p x ) {
p { t e x t - d e c o r a t i o n : u n d e r l i n e ; }
}
@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 3 2 0 p x ) {
p { b a c k g r o u n d - c o l o r : y e l l o w ; }
}
768px < width hello
320 < width<=768px hello
width<=320px hello
16. GRID AND FLUID
Use percentage instead of absolute measure units
Use grids to organize the content
33% 33% 33% 50% 50% 100%
100%
Control with CSS media query
17. MOBILE FIRST
/ * C S S r u l e s f o r m o b i l e c o m e s f i r s t . * /
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 1 p x ) {
/ * C S S r u l e s f o r t a b l e t o r l a r g e r d e v i c e s . * /
}
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 0 2 4 p x ) {
/ * C S S r u l e s f o r d e s k t o p . * /
}
Reason: Some assets for desktop require a lot of network
bandwidth, which is undesired for mobile. Thus, it will be
preferred to give priority to mobile.
18. RANGE OVERLAP 1/2
. m e d i u m - o n l y { d i s p l a y : n o n e ; }
. l a r g e - o n l y { d i s p l a y : n o n e ; }
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 0 p x ) {
. m e d i u m - o n l y { d i s p l a y : i n l i n e ; }
}
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 0 p x ) {
. m e d i u m - o n l y { d i s p l a y : n o n e ; } / * r e s e t * /
. l a r g e - o n l y { d i s p l a y : i n l i n e ; }
}
This style sheet resets the CSS property when the screen size
is larger than the desired width.
19. RANGE OVERLAP 2/2
. m e d i u m - o n l y { d i s p l a y : n o n e ; }
. l a r g e - o n l y { d i s p l a y : n o n e ; }
@ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 3 2 0 p x ) a n d ( m a x - w i d t h : 4 9 9 p x ) {
. m e d i u m - o n l y { d i s p l a y : i n l i n e ; }
}
@ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) {
. l a r g e - o n l y { d i s p l a y : i n l i n e ; }
}
Off-by-one is necessary, otherwise both will be available on
500px.
This style sheet uses exclusive media query, but this might
fail when the screen size is between 499px and 500px.
20. IMAGE AND PICTURE
<img>tag with srcsetand sizesattributes
<picture>tag with <source>tags and a fallback <img>tag
21. <IMG>, SRCSET, AND SIZES
< i m g a l t = " p l a c e h o l d e r "
s r c = " s m a l l . p n g "
s r c s e t = " l a r g e . p n g 1 2 0 0 w , m e d i u m . p n g 5 0 0 w , s m a l l . p n g 3 2 0 w "
s i z e s = " ( m i n - w i d t h : 8 0 0 p x ) 4 0 v w , 1 0 0 v w " / >
srcset — specifies 3 images large.png, medium.png, and
small.pngfor screen that are larger than 1200px, 500px, and
320px respectively.
size — specifies 2 sizes. If the screen size is larger than or
equal to 800px, then resize image to 40% of the screen size.
Otherwise, fit the image to the screen.
22. <PICTURE> AND <SOURCE>
< p i c t u r e >
< s o u r c e m e d i a = " ( m i n - w i d t h : 8 0 0 p x ) "
s r c s e t = " l a r g e . j p g 1 0 2 4 w , m e d i u m . j p g 5 0 0 w , s m a l l . j p g 3 2 0 w "
s i z e s = " ( m i n - w i d t h : 1 2 0 0 p x ) 3 0 v w , 4 0 v w " / >
< s o u r c e s r c s e t = " c r o p p e d - l a r g e . j p g 2 x , c r o p p e d - s m a l l . j p g 1 x " / >
< i m g s r c = " s m a l l . j p g " a l t = " p l a c e h o l d e r " / >
< / p i c t u r e >
Remarks. <source>can refers to non-equivalent images (i.e.
browsers might not be able to derive one from the other
with resizing algorithms.)
24. IE SUPPORT
IE 6-8 does not have CSS media query support.
An severe issue on mobile first website.
There is a shim layer named written in
Javascript.
Respond.js
Guideline: Degrade the QoS gracefully even with mobile-
based CSS.
25. ONE SIZE DON'T FIT ALL
RWD is suboptimal because the users have to download
some unused content/asset. However, properly cra ed site
can mitigate the overhead.
RWD is not the answer to every questions. A good design
should be designed. A good mobile website requires not only
a responsive layout but also well-studied mobile use cases.
26. CONCLUSION
RWD is a technique for web pages to adjust itself on
different screen sizes.
Use CSS media query to support different screen sizes.
Use srcset, sizes, or even pictureto load different
source images.
RWD is the trend but mobile use case analyses are still
required.
