Responsive website

For you to create a responsive website, all you need to do is create a different, innovative and main layout: without setting pixels wide.

The main concept in the responsive is that it will work as a website for any device and any screen that you are viewing.

But how to establish a responsive layout without fixing pixels?

You don't have to kill yourself on the calculator to know where a particular item will be, just that the css classes do all the work for you.

The main thing is to understand how the percentage works, and to keep in mind how to do it.

1. Percentage layout

Bearing in mind that it will work with percentages, it is not ideal to be calculating. Ideally, you should create your rule so that you can create an interesting layout.

Let's start with a column count, in general for sites maybe the maximum is 4 columns, or if it is for system interfaces, for the amount of resources probably 12 columns are enough (12 columns used by the bootstrap).

Let's keep it simple, with just four columns as above:

/* css */
.coluna-1, .coluna-2, .coluna-3, .coluna-4 {float:left;}
.coluna-1 {width:100%; border:1px solid red;}
.coluna-2 {width:50%}
.coluna-3 {width:33.332%}
.coluna-4 {width:25%}
.clear {clear:both;}

<!-- html -->
<div class="coluna-1">
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
</div>

2. Media Query

Through this way, the columns are always aligned to be centralized and all internal content can be edited and will be automatically resized to the necessary device.

An essential item in the HTML5 responsive is the power to configure for each type of screen a certain item to appear or not. This is done with Media Query, available only in CSS 3.

In any CSS file, place the following line:

/ * css * /

/ * devices with a screen with a minimum size of 320px and rotation orientation * /

@media screen and (min-width: 320px) and (orientation: portrait) {/ * your CSS here * /}

@media screen and (min-width: 320px) and (orientation: landscape) {}

/ * devices with a maximum size of 700px * /

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

/ * print page. it is always good to adapt a version so that it is possible to print the website and display the main content that the user wants * /

@media print {}

One of the problems with new high-pixel Android devices is that in this method, the full version of the site will always appear, even on a device with a small screen, such as the Samsung Galaxy S4, Galaxy Note 3, Sony Xperia Z , Nexus 5, and more.

One solution is to use the following:

/ * css * /

@media screen and (-webkit-min-device-pixel-ratio: 1.0) {} / * Ex .: iPhone 3G (S) * /

@media screen and (-webkit-min-device-pixel-ratio: 1.3) {} / * Ex .: Nexus 7 * /

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {} / * Ex .: Samsung Galaxy S II * /

@media screen and (-webkit-min-device-pixel-ratio: 2.0) {} / * Ex .: iPhone 4, 4S, 5, 5c, 6, Samsung Galaxy S III * /

@media screen and (-webkit-min-device-pixel-ratio: 3.0) {} / * Ex .: Nexus 5, Samsung S4, Note 3, iPhone 6 Plus * /

An example in:

http://jsfiddle.net/ario_2025/waufrpjz/2/ (you can see it change dealing with your browser's zoom).

More device examples at:

http://bjango.com/articles/min-device-pixel-ratio/