Responsive web design

      No Comments on Responsive web design

Responsive web design is an approach to web design allowing users developed desktop web pages to be viewed in response to the size of the screen or web browser one is viewing with it.

Getting an idea of responsive design

Desktop view:

Responsive web design

Tablet view:

Responsive web design

Mobile view:

Responsive web design

Responsive web design – using media queries

A media query consist of zero or more expressions that limit the scope of style sheets using media features like width, height and color. Media queries were introduced in CSS3.

Syntax:

Media queries consist of optional media type and can have zero or more expressions. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="scanfcode.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .scanfcode {
    display: none;
  }
}
</style>

Logical operators

  • and
    This keyword is used for combining multiple media features together.
    @media (min-width: 700px) and (orientation: landscape) { ... }
  • comma-separated lists
    comma-separated lists is similar to logical operator or. When using it, if any query returns true ,the corresponding styles are applied.
    @media (min-width: 700px), handheld and (orientation: landscape) { ... }
  • not
    This keyword returns true if the media query would otherwise have returned false.
    @media not screen and (color), print and (color) { ... }

Media features

Feature

ValueUsage
colorintegerIndicates no. of bits per color component of output device.
eg:

@media all and (color) { ... }
aspect-ratioratioDescribe the aspect ratio of the targeted display area of the output device

eg:

 @media screen and (min-aspect-ratio: 1/1) { ... }
gridbooleanDetermines whether the output device is grid device or bitmap device
eg:

@media handheld and (grid) and (max-width: 15em) { ... }
heightlengthDescribes the height of the output device rendering surface
monochromeintegerIndicates no. of bits per pixel on monochrome device
eg:

@media all and (monochrome) { ... }
orientationlandscape / portraitIndicates whether the orientation of the device is portrait or landscape
eg:

 @media all and (orientation: portrait) { ... }
resolutionresolutionIndicates the resolution of the output device
eg:

@media print and (min-resolution: 300dpi) { ... }
scanprogressive / interlaceIndicates scanning process of television output devices
eg:

@media tv and (scan: progressive) { ... }
widthlengthDescribe the width of the rendering device
eg:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Responsive web design – using bootstrap

Bootstrap includes a responsive, mobile-friendly grid system that scales up to 12 columns according to the view port size. It provides predefined classes for easy layout options.


The Bootstrap grid system has four classes:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Bootstrap provides some helper classes, for mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

ClassesDevices
.visible-xsExtra small (less than 768px) visible
.visible-smSmall (up to 768 px) visible
.visible-mdMedium (768 px to 991 px) visible
.visible-lgLarger (992 px and above) visible
.hidden-xsExtra small (less than 768px) hidden
.hidden-smSmall (up to 768 px) hidden
.hidden-mdMedium (768 px to 991 px) hidden
.hidden-lgLarger (992 px and above) hidden

Summary
Responsive web design
Article Name
Responsive web design
Description
Responsive web design is an approach to web design allowing users developed desktop web pages to be viewed in response to the size of the screen on which it is viewed.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *