ITU 07204: Fundamentals of Web

Technologies
Lecture 9: Responsive Website

Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2

Agenda:
• Setting the viewport
• Text and Image Resizing
• Usage of media queries

Adjustable Screen Resolution

1
 Adjustable Screen Resolution
• Viewport
• Flexible Everything
• Media queries

Setting the Viewport

• Giving the browser instruction on how to
control the page’s dimensions and scaling

Flexible Everything: Flexible Texts

• Use “vw” unit to set sizes of texts

– "vw" means the "viewport width"
– 1vw = 1% of viewport width or 1vw is 0.5cm
• In this way, the text size will follow the size of
the browser window

2
 Flexible Everything: Flexible Images

• Use max-width to create responsive image

– Images that scale according to display size

• Makes size of images adjustable i.e. become

smaller or bigger without exceeding its
original size

Flexible Everything: Flexible Images

• This is different from using width property

• With width property, the size of an image can

be stretched to exceed its original size
– This distorts an image and make its quality poor

Media Queries
• A CSS technique to include a block of CSS
properties (completely different style) only if a
certain condition is true
• It uses @media rule, see the example
@media only screen and (max-width:600px)

3
 …Media Queries: Size

• See the example

@media only screen and (max-
width:600px){body {background-color:blue}}
• This means if the browser window is 600px or
smaller, the background color will be blue

10

10

…Media Queries: Size

11

11

…Media Queries: Page Orientation

• Change layout of a web page depending on

the orientation of a device
@media only screen and (orientation:
landscape){body{background-color:yellow}}
• This means if the orientation of a device
changes to landscape, the background color
will be yellow

12

12

4
 …Media Queries: Elements Hiding

@media only screen and (orientation:

landscape){div.content{display:none}}
• This means if the orientation of a device
changes to landscape, all div elements with
class content will disappear

13

13

Design for Mobile Device First Concept

• This means designing for mobile before
designing for desktop or any other device
• This will make the page display faster on
smaller devices
• Instead of changing styles when the width
gets smaller, change the design when the
width gets larger

14

14