Responsive Design

Responsive Design for Website

I use "rem" units to avoid problems (including the "media" max/min widths).

Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.

https://www.w3.org/TR/css-values-3/#font-relative-lengths

EDIT: (cause the comment)

There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use @media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).

Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)

The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.

Responsive web design by using css or javascript?

CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js, but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.

Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.

Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.

Hope that helped :)

Make the List to be responsive design

You can simply add a flexwrap: wrap; to the container of the li, it will allow the child-elements (here, li), to go to another line. I invite you to learn about the flexbox and all their properties, this is very helpful for the responsive design! Check it out here.

.listlist{
  display: flex;
  flex-wrap: wrap;
}

Responsive design and hiding div element

It's very simple... Just add a space between and and (min...) ;)

Responsive Design with @media in CSS

Make sure to put the media query at the end of your code. Also don't forget to add this meta tag to the head element in html file.

<meta name="viewport" content="width= device-width, initial-scale= 1.0">

By the way try editing query like this:

@media only screen and (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

---

Related Topics