手机移动端自适应

最新推荐文章于 2024-02-12 11:47:00 发布

不归少年

最新推荐文章于 2024-02-12 11:47:00 发布

阅读量174

点赞数

分类专栏： html，css

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/102500464

版权

html，css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机移动端自适应</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    .block {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        /* 等比例放大
        width:320px;
        height: 480px;
        margin:auto; */
    }
    .block>div {
        flex: 1;
    }

    </style>
</head>
<body>
    <!-- 
        name=viewport  视口
        width=device-width 装置的宽
        initial-scale=1.0 默认放大比例
        maximum-scale=1.0 默认最大放大比例
        minimum-scale=1.0 默认最小放大比例
        user-scaleble=no 禁止用户缩放
     -->
     <div class="block">
         <div style="background: red"></div>
         <div style="background: yellow"></div>
         <div style="background: purple"></div>
         <div style="background: green"></div>
         <div style="background: blue"></div>
     </div>
</body>
</html>