Responsive Web Design question

HTML & CSS
1

Hey all, new to the forum and been trying to understand Responsive Web Design.

I have taught myself CSS over the past year, so I am no guru but I do have an understanding of it and can make my own website using it. But I am having a harder time understanding Responsive. I checked out a tutorial on it at css-tricks.com. It shows what needs to be used to define how it responds:
1 /* Smartphones (portrait and landscape) ----------- /
2 @media only screen
3 and (min-device-width : 320px)
4 and (max-device-width : 480px) {
5 / Styles /
6 }
7 / Smartphones (landscape) ----------- /
8 @media only screen
9 and (min-width : 321px) {
10 / Styles /
11 }
12 / Smartphones (portrait) ----------- /
13 @media only screen
14 and (max-width : 320px) {
15 / Styles /
16 }
17 / iPads (portrait and landscape) ----------- /
18 @media only screen
19 and (min-device-width : 768px)
20 and (max-device-width : 1024px) {
21 / Styles /
22 }
23 / iPads (landscape) ----------- /
24 @media only screen
25 and (min-device-width : 768px)
26 and (max-device-width : 1024px)
27 and (orientation : landscape) {
28 / Styles /
29 }
30 / iPads (portrait) ----------- /
31 @media only screen
32 and (min-device-width : 768px)
33 and (max-device-width : 1024px)
34 and (orientation : portrait) {
35 / Styles /
36 }
37 / Desktops and laptops ----------- /
38 @media only screen
39 and (min-width : 1224px) {
40 / Styles /
41 }
42 / Large screens ----------- /
43 @media only screen
44 and (min-width : 1824px) {
45 / Styles /
46 }
47 / iPhone 4 ----------- /
48 @media
49 only screen and (-webkit-min-device-pixel-ratio : 1.5),
50 only screen and (min-device-pixel-ratio : 1.5) {
51 / Styles */
52 }

Essentially what are you having to do different for each or are you having to program for each specifically? Or have one general layout and then modify it within these terms? Thanks for any info and help, could just be on of those days I have just read too much on it.

2

the answer is “yes”
think of the media query as “if” statements. Depending on how you code your “logic” you could add/ change/ nullify the rest of your CSS at specific screen conditions.

3

Hi tomjones2013. Welcome to the forums. :slight_smile:

That list at CSS tricks is a handy one, but normally you’d only use a few of them at a time.

Strictly speaking, you don’t really need @media rules for your pages to be responsive, because you can set a fluid width on your content. Generally, though, you want more control over the layout of the page at different sizes, which is where @media rules come in handy. If you narrow your browser down and want to change the layout at a particular point, then write an @media rule for that screen size. There’s no need to target specific devices, and it’s too hard, anyway, as there are lots and lots of them.

4
Off Topic:

I may be anachronous, but I believe that “responsive” implies the use of @media queries to change the layout of a page, whereas “fluid” describes the behavior of objects that slide/resize/and flow to adapt to changes in the width of the window without using @media queries. (tables (or no frame at all) being the “classic” provider of fluid behavior.)

5
Off Topic:

The word has been associated with @media rules of late, but I don’t accept that the word can’t be used in other contexts. Any layout that responds to screen sizes and/or browser movements can reasonably be called “responsive”, IMHO. It may seem that I’m splitting hairs, but it’s worth remembering that the original HTML websites (with no CSS at all) were responsive in this way. Over time, CSS has been used to make layouts less and less fluid/responsive, and now CSS is introducing new features to allow us to keep out cake and eat it too. At least it’s worth seeing @media as an antidote to a problem that CSS kind of created for itself. :slight_smile:

6

[ot]

You’re quite right. In the “old days”, table layouts were heralded as “responsive” because they responded to changes in the width of the window. The term “fluid” is the newcomer to the table (so to speak). How soon I forget :slight_smile: That said, the distinction provided by modern usage is useful, otherwise, “responsive” is ripe for ambiguity. For that reason, I guess it’s one change that recalcitrant Ron likes (but he shouldn’t forget it’s origin). :stuck_out_tongue:

Thanks for the tangent.[/ot]