Responsive web design

Responsive web design

posted in: Development | 0

Responsive web design can deliver web pages in variable sizes.It is a must for tablets and mobile devices
Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

Initializing Media Queries

There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

HTML

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

CSS

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

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

 

TARGETING TABLETS AND IPAD:

Portrait and Landscape, both:

@media all and (device-width: 768px)

and (device-height: 1024px) {

#sampleDiv{ /* Your styling goes here */ }

}

TARGETING SMARTPHONES AND IPHONE:

Portrait:

@media only screen

and (max-width: 767px) {

#sampleDiv{ /* Your styling goes here */ }

}

Landscape:

@media only screen

and (min-width: 480px)

and (max-width: 767px) {

#sampleDiv{ /* Your styling goes here */ }

}

Leave a Reply