屏幕适配

时间  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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程