Responsive Web design – HTML


title: Responsive Web Design

Responsive Web Design

Responsive web design is the concept of designing web pages that adapt to different screen sizes. It commonly involves the use of different layouts, font sizes, and placement of navigation menus.

A mobile first approach should be used when building a responsive website or web app which means styling for the smallest screen first, usually 320px, and then using media queries to style layout for larger screens.

In order to create a responsive web page, CSS is commonly used to style your HTML elements. Some common methods in CSS used to create responsive web designs are:

  1. Writing media queries
  2. Using pre-existing CSS frameworks
  3. Using the Flexbox model
  4. Using CSS Grid

1. Media queries

Media queries tell the web browser to ignore or replace properties of the webpage based on specific attributes like screen width or whether the user is printing.

@media (query) { /* The browser will use the CSS rules within the curly braces when the query is true */ }

The following example sets padding-left and padding-right within the class more-padding when the screen width is less than or equal to 768px.

@media screen and (max-width: 768px) { .more-padding { padding-left: 10px; padding-right: 10px; } }

2. CSS Frameworks

CSS frameworks like Bootstrap, Material Design Lite, and Foundation have pre-built CSS classes that make responsive design coding simpler. These classes operate like standard HTML classes.

In this example, col-md-9 and col-sm-6 set the width of the <div> tag based on whether the screen is small or medium.

<div class="col-12 col-md-9 col-sm-6"></div>

The Bootstrap framework divides a row into twelve columns. In the above example, the <div> will spread across either nine or six of them. The grid system, pictured below, is fundamental to how Bootstrap eases responsive design.

Grid Example

3. Flexbox Model

The flexbox layout model, makes it’s easier to design responsive layout structure without using float or positioning.

This layout model is one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

The main axis is defined by flex-direction, which has four possible values:

* row * row-reverse * column * column-reverse

To start using the Flexbox model, you need to first define a flex container.
The flex container becomes flexible by setting the display property to flex:

<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>

The flex container properties are:

* flex-direction * flex-wrap * flex-flow * justify-content * align-items * align-content

The flex item properties are:

* order * flex-grow * flex-shrink * flex-basis * flex * align-self

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

PropertyDescription
displaySpecifies the type of box used for an HTML element
flex-directionSpecifies the direction of the flexible items inside a flex container
justify-contentHorizontally aligns the flex items when the items do not use all available
flex-wrapSpecifies whether the flex items should wrap or not,there is not enough
if room for them on one flex line
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items,but
flex-flowA shorthand property for flex-direction and flex-wrap
orderSpecifies the order of a flexible item relative to the rest of the flex items
align-selfUsed on flex items. Overrides the container’s align-items property
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis
properties
align-itemsVertically aligns the flex items when the items do not use all available
space on the cross-axis

Shorthand values for the flex properties

The predefined values are as follows:

- flex: initial - flex: auto - flex: none - flex: <positive-number>

More Information:

  1. CSS Flexbox Complete tutorial in 8 minutes
  2. Codevarsity CSS section.
  3. CSS Flexbox tutorial by CodingTutorials360

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.