Responsive web design

MEDIA QUERIES FOR RESPONSIVE WEB DESIGNS

0  0 2015-04-02 01:26:32

In the world of Hi tech devices, everything is just single touch away,

In the area of web development also it is very necessary for any website to target every single device screen.Previously it can be achieve by developing separate website for desktop and application for mobile, but now this can be also achieved by responsive web designing covering every screen type.

What exactly responsive web design is?

Responsive web design is a process of designing and building websites to provide better accessibility.Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone

For the responsive web designing bootstrap html/css/ JavaScript framework concepts are widely used, with the help of this websites has become much easier to design.

With the new Bootstrap 3 mobile first grid system we can createthe responsive and mobile friendly website, because in this system it is not  required include any additional style sheet to enable responsive feature.its other grid system provides better control on different types of devices like cell phones, tablets, desktop and laptops, large screen devices etc.

Below are some  basic media queries for targeting basic screen sizes :

Extra Small Devices (e.g. cell phones): these are the default, creating the mobile first concept in Bootstrap. This covers devices smaller than 768px wide.

Small Devices (e.g. tablets): these are targeted with @media (min-width: 768px) and (max-width: 991px) { ... }.

Medium Sized Devices (e.g. Desktops) : these are screen size smaller than 1200px and greater than 991px, using @media (min-width: 992px) and (max-width: 1199px) { ... }.

Larger Devices (e.g. wide-screen monitors) are greater than 1200px, targeted using @media (min-width: 1200px) { ... }.

 

All you have to do is just use the correct CSS file from the Bootstrap CSS files. And include in your code just shown below.

  1. <link rel="stylesheet" href="css/bootstrap.css">
  2. <link rel="stylesheet" href="css/bootstrap-responsive.css">

Comments (0)

Post Your Comments

Headquarter



Hong Kong Office



Find Us On

Website Development Company
SEO
Digital Marketing
website development company in Hong Kong
website designer in pune