Scribd
Upload
11 views18 pages

Ch 3

Uploaded by

kaps4076
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views18 pages

Ch 3

Uploaded by

kaps4076
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Advanced Web Technology

09CE1503

Responsive Web Design


Prof. Kruti Rathod

1
Concept of Responsive web
design
● Responsive web design (RWD) is a web design approach aimed at creating
web pages that look and function well on a variety of devices and screen
sizes, from desktop monitors to mobile phones.
● The main goal is to ensure an optimal user experience, with easy
navigation and readability, regardless of the device being used.

Concepts of Responsive Web Design


1. Fluid Grid Layouts:
● Instead of using fixed-width layouts, fluid grids use relative units like
percentages to define the width of elements.
● This allows the layout to adjust and resize dynamically based on the
screen size.
Concept of Responsive web
design
2. Flexible Images:
● Images should be flexible to scale and adjust within their containing
elements.
● This is often achieved using CSS techniques like setting the max-width
to 100%, which ensures that images resize according to their
container’s width.
3. Media Queries:
● Media queries are a key component of responsive design.
● They allow you to apply different styles based on the characteristics of
the device, such as screen width, height, orientation, and resolution.
● This helps in tailoring the layout and design for different devices.
Concept of Responsive web
design
4. Viewport Meta Tag:
● The viewport meta tag helps control the layout on mobile browsers.
● It ensures that the web page is rendered correctly on all devices.
● A common use is setting the viewport width to the device width and
the initial scale to 1.
Viewport
● The viewport meta tag provides instructions to the browser on how to control the
page's dimensions and scaling. It is placed within the <head> section of an HTML
document.

Common Attributes
1. width:
● Specifies the width of the viewport.
● Can be set to a specific value (like 600px) or set to device-width to match the
screen's width in device-independent pixels.
2. height:
● Specifies the height of the viewport.
● Can be set to a specific value or to device-height.
Viewport
3. initial-scale:
● Sets the initial zoom level when the page is first loaded.
● A value of 1.0 represents no zoom.
4. minimum-scale:
● Sets the minimum zoom level that the user is allowed to zoom out to.
5. maximum-scale:
● Sets the maximum zoom level that the user is allowed to zoom in to.
6. user-scalable:
● Controls whether the user can manually zoom in and out.
● Values are yes or no.
CSS Position and Float
Properties
CSS Position Property
The position property specifies the type of positioning method used for an element.
There are five main values: static, relative, absolute, fixed, and sticky.

1. static
● This is the default value.
● Elements are positioned according to the normal document flow.
● Properties top, right, bottom, and left do not affect static positioned elements.
CSS Position and Float
Properties
2. relative
● Elements are positioned relative to their normal position.
● top, right, bottom, and left will offset the element from its normal position without
affecting the layout of surrounding elements.
CSS Position and Float
Properties
3. absolute
● Elements are positioned relative to the nearest positioned ancestor (relative,
absolute, or fixed).
● If no positioned ancestor is found, it uses the document body, and moves along
with page scrolling.
● Removed from the normal document flow.
CSS Position and Float
Properties
4. fixed
● Elements are positioned relative to the browser window, and do not move when
the page is scrolled.
● Removed from the normal document flow.
CSS Position and Float
Properties
5. sticky
● Elements are treated as relative until they cross a specified point, then they are
treated as fixed.
● Useful for sticky headers that stay at the top of the viewport when you scroll past
them.
CSS Position and Float
Properties
CSS Float Property
● The float property is used to wrap text around elements such as images, or to create
a column-based layout.
● Elements can be floated to the left or right, and they will be removed from the normal
document flow, causing subsequent elements to wrap around them.

Values
● left: The element floats to the left of its container.
● right: The element floats to the right of its container.
● none: Default value. The element does not float.
● inherit: Inherits the float value from its parent.
CSS Position and Float
Properties
Clearing Floats
● When using float, it can affect the layout of subsequent elements.
● The clear property can be used to prevent elements from wrapping around a floated
element.

Values
● left: No floating elements allowed on the left side.
● right: No floating elements allowed on the right side.
● both: No floating elements allowed on either side.
CSS Flexbox
● CSS Flexbox (Flexible Box Layout) is a layout model that provides an efficient way to
layout, align, and distribute space among items within a container, even when their
size is unknown or dynamic.
● Flexbox aims to give a container the ability to alter its items' width, height, and order
to best fill the available space.

Basic Concepts
1. Flex Container: The parent element where display: flex or display: inline-flex is
applied.
2. Flex Items: The direct children of the flex container.
CSS Grid Layouts
● CSS Grid Layout is a powerful layout system in CSS that allows you to create
complex and responsive web layouts. It is a two-dimensional system, meaning it can
handle both columns and rows, unlike Flexbox which is mainly one-dimensional.

Basic Concepts
1. Grid Container: The parent element where display: grid or display: inline-grid is
applied.
2. Grid Items: The direct children of the grid container.
CSS Grid Layouts

Grid Container Properties


display: grid | inline-grid Defines a grid container and establishes a new grid formatting context for its
content.

grid-template-columns Defines the number of columns and their width.

grid-template-rows Defines the number of rows and their height.

grid-template-areas Defines named grid areas.

grid-column-gap / column-gap Sets the gap (gutter) between columns.

grid-row-gap / row-gap Sets the gap (gutter) between rows.

gap Shorthand for row-gap and column-gap.

justify-items Aligns grid items along the row axis (start, end, center, stretch).

align-items Aligns grid items along the column axis (start, end, center, stretch).

justify-content Aligns the grid within its container along the row axis.
CSS Grid Layouts

Grid Container Properties


align-content Aligns the grid within its container along the column axis.

grid-auto-columns Sets the size of implicitly created columns.

grid-auto-rows Sets the size of implicitly created rows.

grid-auto-flow Controls how auto-placed items are inserted in the grid.


CSS Grid Layouts

Grid Item Properties


grid-column-start Specifies a grid item's start position on the column axis.

grid-column-end Specifies a grid item's end position on the column axis.

grid-row-start Specifies a grid item's start position on the row axis.

grid-row-end Specifies a grid item's end position on the row axis.

grid-column Shorthand for grid-column-start and grid-column-end.

grid-row Shorthand for grid-row-start and grid-row-end.

grid-area Shorthand for specifying grid-row-start, grid-column-start, grid-row-end, and


grid-column-end.

justify-self Aligns a grid item along the row axis within its grid area.

align-self Aligns a grid item along the column axis within its grid area.

You might also like