- LancerVJ

One Website For all Devices

10 Basic Tips about Responsive Web Page

Examples

From 200 to 640px:

@media screen and (min-width: 200px) and (max-width: 640px)

Landscape, at least 600px

@media screen and (min-width:600px) and (orientation: landscape)

Portrait, less than 380 px

@media screen and (max-width:380px) and (orientation:portrait)

Think of media queries as a powerful. if this size, then this style tool.

For responsive design you want to focus on the width conditions: depending on the client's current width, you'll load an alternate stylesheet or and specific styles.

There are two ways to Deal with it

Import file based on device width:<style>@import url(tiny.css) (min-width:300px);
@import url(small.css) (min-width:600px);
@import url(big.css) (min-width:900px);
</style>
Media Query

@media screen and (max-width:300px) {

/*Tiny Styles*/

}

@media screen and (max-width:600px) {

/*Small Styles*/

}

How to decide what size to Target? Let's take a quick break and check this:

Define the Break Points:

Common resolutions can be sorted in 6 major breakpointsk, you can work with them this way.

Focus on the major breaks
Add the nice to have breaks if possible
Set the full desktop version above 1024 px

Breaking is nice, Bending is nice too

Make Your Layout Flexible:

Flexible grid use columns to organize content, and relative instead of fixed width to adapt the viewport size.

Fluid layout is the best way to be ready for any kind of screen size and / or orientation.
Combined with the right media queries you can adapt to any possible device.

Mind it!!!
To avoid rounding errors, use long decimals and let the browser do the maths. (66% + 33% != 100%)

Great Grid Systems:

Other Grid System you SHOULD know:
960 Grid System 960.gs
Gridset gridsetapp.com
Columnal columnal.com
Golden GS goldengridsystem.com
1140 CSS Grid cssgrid.net

Mixing Fluid width + Padding + borders = Huge Mess? wtf?! srsly?

BEHOLD!

*{BOX-SIZING: BORDER_BOX;}

Scenerio:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
}

Forever fix quirky box model size computation with this simple rule

i have this div: 67% width, with a 15px padding and 3px border...

Before:
Final width = 67% + 15*2px + 3*2px
Total layout width > 100%
Headache, possible use of violence

After:
Final width = 67%

Now my layout adapts, but my pictures don't.

Adaptative sizing

Simply adjust the width:

100% width:

img { widhth: 100%; }

100% width, capped to file size:

img {max-width:100%; }

Breakpoints:

The src attribute of a picture can not be manipulated in a media query alone (yet).

Possible solutions: