Scribd
Upload
44 views

Lecture 9 Responsive Website

This document discusses responsive web design techniques including setting the viewport, resizing text and images, and using media queries. It explains how to make text sizes flexible using viewport width units and images adjustable with max-width. Media queries allow changing styles based on screen width, orientation, and other conditions. The document recommends designing for mobile devices first for faster loading on smaller screens.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Lecture 9 Responsive Website

This document discusses responsive web design techniques including setting the viewport, resizing text and images, and using media queries. It explains how to make text sizes flexible using viewport width units and images adjustable with max-width. Media queries allow changing styles based on screen width, orientation, and other conditions. The document recommends designing for mobile devices first for faster loading on smaller screens.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like