Web-メディアクエリー

3531 ワード

Webフロントエンド開発

配置レイアウト
メディアクエリのコード:



<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
            .a{
                border: 1px solid #000000;
                width: 100px;
                height: 100px;
                background-color: #000000;
            }

            @media only screen and (min-width: 300px) and (max-width: 640px) {
                .a{
                    background-color: red;
                }
            }

            @media only screen and (min-width: 700px) {
                .a{
                    background-color: green;
                }
            }

            @media only screen and (max-width:200px ) {
                .a{
                    background-color: blue;
                }
            }
        style>
    head>
    <body>
        <div class="a">div>
    body>
html>

210823[40]大邱AI学校一般課程Webプログラミングcss新規内容

マウストラックのコードを記録