屏幕適配

時間 2019-11-12

標籤屏幕適配简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 設置網頁編碼 -->
    <meta charset="UTF-8">
    <!-- 設置網頁關鍵字 -->
    <meta name="keywords" content="">
    <!-- 設置網頁描述 -->
    <meta name="description" content="">
    <!-- 設置網頁不能出現縮放效果 
        width=device-width:  讓盒子的寬度與當前設備同樣寬,
        initial-scale=1;  禁止縮放
        禁止用戶手動縮放(有些移動設備瀏覽器,還會支持,有些瀏覽器不支持)
        user-scalable=no
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100%;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">薩達撒旦法撒旦法</div>
    <!-- <video></video> -->
    <!-- 最理想的網頁佈局: -->
    <!-- 1. 讓盒子寬度與設備寬同樣  -->
    <!--   width: 100%; -->
    <!-- 2. 網頁佈局中不能出現縮放效果 經過 meta標籤設置-->
    <!-- 總結: 使用流式佈局實現頁面適配的步驟 
        1. 保證寬度等於設備寬
            width: 100%;
        2. 保證頁面中不能出現縮放效果
        <meta name="viewport"  content="width=device-width, initial-scale=1, user-scalable=no">
    -->
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。