0

私はブートストラップから離れようとしており、実際にブレークポイントを自分で制御しています。学習を進める前に、自分が正しい道を進んでいるかどうかを知りたいです。したがって、次のようにするのは正しいですか：

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;
}
4

3 に答える 3