天天看點
傳回

媒體查詢（前端面試題）

一個小遊戲的公司的前端面試題
效果示範.gif

考點

  • 基礎的布局知識, 左側浮動脫離标準流, 右側margin-left 設定為左側寬度,即可快速實作左右布局
  • 媒體查詢, 媒體查詢可以根據螢幕尺寸的變化,進行動态适配,文法為@margin (條件) {}

解法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面試題</title>

    <style>
        body{
            margin: 0;
        }

        #header{
            width: 100%;
            height: 200px;
            background-color: #33ccff;
        }

        #left_con{
            float: left;
            width: 100px;
            height: 1000px;
            background-color: #ffcc99;
        }

        #right_con{
            margin-left: 100px;
            width: 100%;
            height: 1000px;
            background-color: #823384;
        }


        /*要及時覆寫上面的樣式*/
        @media (max-width: 700px) {

            #header{
                width: 100%;
                height: 50px;
                background-color: #33ccff;
            }

            #left_con{
                
                width: 0;
            }

            #right_con{
                width: 100%;
                margin-left: 0;
                background-color: #823384;
            }


        }

    </style>

</head>
<body>

    <div id="header">


    </div>


    <div id="con">
        <div id="left_con">

        </div>
        <div id="right_con">

        </div>
    </div>

</body>
</html>
前端開發 開發前端 前端開發問題 前端開發分享 前端開發使用 開發前端架構
上一篇: &lt;算法&gt;圖解逆序單向連結清單全過程
下一篇: 個人項目彙總多人線上聊天程式百度文庫線上爬蟲線上合成頭像圖蟲網資源爬取雙端适配優秀站點分享:

繼續閱讀