CASCADING
STYLE
SHEETS
Introduction to CSS
RESPONSIVE WEB
DESIGN
Ethan Marcotte, the man who coined the
term “Responsive Web Design” .
He is an independent web designer based
in Boston, Massachusetts.
RESPONSIVE WEB
DESIGN
Responsive Web Design is about using HTML
and CSS to automatically resize, hide, shrink, or
enlarge, a website, to make it look good on all
devices (desktops, tablets, and phones).
A responsive web design will automatically
adjust for different screen sizes and viewports.
Responsive web design uses only HTML and
CSS.
Responsive web design is not a program or a
JavaScript.
THE VIEWPORT
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
Setting The Viewport
To create a responsive website, add the <meta> tag to all your
web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta tag gives the browser instructions on how to control the
page's dimensions and scaling.
The width=device-width part sets the width of the page to follow
the screen-width of the device (which will vary depending on the
device).
The initial-scale=1.0 part sets the initial zoom level when the
page is first loaded by the browser.
RESPONSIVE IMAGES
Responsive images are images that scale nicely
to fit any browser size.
Using the width Property
<img src="img_girl.jpg" style="width:100%;">
If the CSS width property is set to 100%, the
image will be responsive and scale up and
down.
RESPONSIVE TEXT SIZE
The text size can be set with a "vw" unit, which means
the "viewport width".
That way the text size will follow the size of the
browser window.
<h1 style="font-size:10vw">Hello World</h1>
MEDIA QUERIES
Media queries can be used to check many things,
such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or
portrait mode?)
resolution
CODING
CODING