Example of css for create webs with Responsive design.

Recently, increasingly required me that the sites that I build, will fit on the usual screen size and not only create a unique size of the site (in resume, the companies are demanding more that us webs pages will have the Responsive design)

For we can make it, until now, we will specified the hight and width in percent but sometimes, the result is far to the we will like. But now, with css3 and us media queries, this is possible.

Only we need add the next code in we css style.

1
2
3
@media all and (max-width : 320px) {
    /* Code that is executed when the width screen will have 320px or less */
}

With this css rule, we can achieve that all screens with a 320px resolution or less (the common smartphones will use this resolution) will apply the css rules that we are indicate in this block.

We can use more discriminations using media queries (orientation of the screen, if is a pc screen or a smart tv, … ) and more. Every day come out new rules therefore I recommend visit often the web of the w3c for check the news.

So, arriving to this point, sure that you are asking if exist a magic method for contemplate all the resolutions of all devices with connection to Internet (movile phones, tablets, smart tv, refrigerators,…) that they can invade our lives. Unfortunately, not exist a list with all resolutions (but every day born new uncomplete lists ).

Now, if it’s any help, here are writen a template that I use usually for contemplate the vast majority of the resolutions of the devices. You can amplify or reduce according your needs. Remember that the order of the media queries is important because the browser apply the last rule that match with the resolution of it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* Large screens ----------- */
@media all and (max-width : 1824px) {
 
}
 
/* Desktops and laptops ----------- */
@media all and (max-width : 1370px) {
 
}
 
/* Tablets (portrait and landscape) ----------- */
@media all
and (min-width : 768px) 
and (max-width : 1024px) {
 
}
 
/* Tablets (landscape) ----------- */
@media all and (max-width : 800px) {
 
}
 
/* Small tablets (portrait and landscape) ----------- */
@media all
and (min-width : 600px) 
and (max-width : 800px) {
 
}
 
/* Small Tablets (landscape) and Tablets (portrait) ----------- */
@media all and (max-width : 750px) {
 
}
 
/* Smartphones (landsacpe) ----------- */
@media all and (max-width : 640px) {
 
}
 
/* Small Tablets (portrait) ----------- */
@media all and (max-width : 600px) {
 
}
 
/* Smartphones (portrait and landscape) ----------- */
@media all 
and (min-width : 320px) 
and (max-width : 480px) {
 
}
 
/* Smartphones (landscape) ----------- */
@media all and (max-width : 480px) {
 
}
 
/* Small Smartphones (landscape) ----------- */
@media all and (max-width : 430px) {
 
}
 
/* Smartphones (portrait) ----------- */
@media all and (max-width : 375px) {
 
}
 
/* Small Smartphones (portrait) ----------- */
@media all and (max-width : 320px) {
 
}

Leave a Reply

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