SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Web Design question

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi tomjones2013. Welcome to the forums.

    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by ronpat View Post
    I believe that "responsive" implies the use of @media queries to change the layout of a page
    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.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    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.
    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 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).

    Thanks for the tangent.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •