Responsive Web Design

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Flexible Layouts

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Relative Viewport Lengths

• vw: Viewports width.
• vh: Viewports height.
• vmin: Minimum of the viewport’s height and width.
• vmax: Maximum of the viewport’s height and width.

Media Queries

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

HTML file

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

CSS

/* @media Rule */
@media all and (max-width: 1024px) {...}

@media all and (min-width: 800px) and (max-width: 1024px) {...}

/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

Flexible Media

T make media scalable is by using the max-width property with a value of 100%. Doing so ensures that as the viewport gets smaller any media will scale down according to its containers width. for example:

img, video, canvas {
  max-width: 100%;
}

What is "Float"?

CSS property helps us in a page layout, images or any section need to text wraps around them as needed, this is the main purpose of Float.

Floating an element allows you to take that element out of normal flow and position it to the far left or right of a containing box. The floated element becomes a block-level element around which other content can flow.

float as a property and using either left; or right; as a value.

we can clear the float using: clear as a property and using either left;, right;, both; or none as a value.