Julie24 Julie24 - 7 months ago 12
HTML Question

responsive design breakpoints

I am trying to get away from bootstrap, and actually control my breakpoint myself. Before I go on with learning, I would like to know if I am on the right track. So is it correct to do it like this:

HTML:

<!DOCTYPE html>
<html>

<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div id="container">
<img src="banner.png"/>
<section id="left-column">
<p>This is the left column</p>
</section>
<aside id="right-column">
<p>This is the right column</p>
</aside>
</div>
<!-- /Container -->

</body>
</html>


CSS:

#container {
width: 960px;
margin: 0px auto;
}

#left-column {
width: 700px;
float: left;
background-color: red;
}
#right-column {
width: 260px;
float: left;
background-color: blue;
}

/* Tablet & Computer */
@media screen and (max-width:959px) {
#container {
width:100%;
}
#left-column {
width: 70%;
}
#right-column {
width: 30%;
}
img {
width: 100%
}
}

/* Phone */
@media screen and (max-width:640px) {
#left-column {
width: 100%;
}
#right-column {
width: 100%;
}
}
/* Stop Scaling */
@media screen and (max-width:320px) {
#container {
width: 320px;
}

Answer

I don't think there's a good / bad way to use media queries, just the way you want it to :)

Bootstrap helps you with that by providing different breakpoint to apply to mobile/tablet/desktop and also different class names to help you with your layout style but you can do it from your own by using the breakpoints you want without Bootstrap. (See medias queries information about Bootstrap here : http://getbootstrap.com/css/#grid-media-queries )

So your way to do it is correct. Just close the last bracket here :

/* Stop Scaling */
@media screen and (max-width:320px) {
    #container {
        width: 320px;
    }
}

Also, I prefer to use fluid width (%) with mobile because it will takes the full width of the screen. In the case of your last media query, the width selected is quite useless (I don't know a lot of devices who go down 320px width)

See here common devices used to help you select media queries : http://mydevice.io/devices/

Comments