(Fluid page)
Flexible Layouts
It is the ability of a web page layout to be flexible
and responsive no matter what device is used.
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.
Viewport Meta Tag
A <meta> viewport element gives the browser instructions on
how to control page’s dimension and scaling.
The width=device-width sets the width of the browser to follow
the screen-width of the device.
The initial-scale=1.0 sets the initial zoom level when the page
is first loaded by the browser.
What Grid
is System
?
A grid system is a set of measurements a graphic
designer can use to align and size objects within
the given format.
Things to consider before creating your grid
Design - Decide if your columns will be of equal or unequal
system:
width. You need to know how many columns you will
use
- Will you resize columns proportionally with viewport
Behaviorwidth changes?
- Will you change your columns while keeping gutters
fixed?
Grid System -- You
Willmay
youeither
changeusethe
an HTML grid
number ofsystem or CSS
columns grid
at specific
system.
to use breakpoints?
Example Grid System for Web:
Responsive Grid View is
divided into 12 columns
