Fixed, Fluid, Adaptive, and Responsive web design
• Fixed websites have a set width and resizing the browser
or viewing it on different devices won’t affect on the way
the website looks.
• Fluid websites are built using percentages for widths. As a
result, columns are relative to one another and the
browser allowing it to scale up and down fluidly.
• Adaptive websites introduce media queries to target
specific device sizes, like smaller monitors, tablets, and
mobile.
• Responsive websites are built on a fluid grid and use
media queries to control the design and its content as it
scales down or up with the browser or device.
Different devices has different design
• we can't use reflow across all devices.
Why we can't use reflow across all devices?
Reflow across all devices
• New form factors come out all the time
Changing Layouts
Changing Layouts
Mobile Tablet Monitor
Responsive Web Design
• Responsive web design is the practice of building a website suitable to
work on every device and every screen size, no matter how large or small,
mobile or desktop.
Responsive Web Design
• Responsive web design makes your web page look good on all devices.
• Responsive web design uses only HTML and CSS.
• Responsive web design is not a program or a JavaScript.
Why Responsive Web Design?
Responsive Web Design
• Monitor Tablet Mobile
Media Queries
• Media Queries is a W3C Candidate Recommendation—a widely reviewed
document which is ready for implementation by browser vendors.
• It's an extension of media dependent stylesheets tailored for different media
types (i.e. screen and print) found in CSS2.
• It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
• A media query consists of a media type and an expression to check for certain
conditions of a particular media feature. The most commonly used media
feature is width.
Media Queries Examples
• Example 1: If the browser window is smaller than 500px, the background
color will change to light blue:
• @media only screen and (max-width:500px)
{
body {
background-color: lightblue;
}
}
Media Queries Examples (Example 1)
Media Queries Examples (Example 1)
Media Queries Examples 2
• Example 2:The following example shows a menu that will float to the left
of the page if the viewport is 480 pixels wide or wider (if the viewport is
less than 480 pixels, the menu will be on top of the content):
• @media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
Media Queries Examples 2
Media Queries Examples 2
Available Media Query Expression
Width Orientation Color
Height Aspect-ratio Color-index
Device-width Device-aspect-ratio Monochrome
Device-height Grid Resolution
Flexbox
• Flexible boxes, or flexbox, is a new layout mode in CSS3.
• Use of flexbox ensures that elements behave predictably when the page
layout must accommodate different screen sizes and different display
devices.
• For many applications, the flexible box model provides an improvement
over the block model in that it does not use floats, nor do the flex
container's margins collapse with the margins of its contents.
Flexbox (Example)
Flexbox consists of flex containers and flex items.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Flexbox (Example continue)
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
Flexbox (Example out put)
Flexbox Properties
Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available
space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available
space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not
enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-
items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand propert for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items
inside the same container
