app端的前端界面适配问题

1.视口ViewPort适配

 <!--设置视口,解决pc和手机屏幕不匹配问题-->
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

适配视口之后,pc端和手机端屏幕大小不匹配问题就解决了;

2.图片不清晰问题

使用大一倍的图片,通过css进行强制压缩到原来大小;背景图可以使用background-size适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--设置视口,解决pc和手机屏幕不匹配问题-->
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

    <!--图片不清晰的解决方法,使用大一倍的图片,使用样式强制压缩到一倍效果-->
    <title>app</title>
    <style type="text/css">
        body{
            margin: 0px;
        }

        .header{
            height: 50px;
            background-color: gold;
            text-align: center;
            line-height: 50px;
        }

        /*图片适配*/
        .pic1{
            width: 200px;
            height: 200px;
            text-align: center;
        }

        /*背景适配*/
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto 0;
            background: url("images/resume.jpg") no-repeat;

            /*background-size: 200px 200px;*/
            /*按比例填充*/
            /*background-size: cover;*/

            /*单边填充*/
            background-size: contain;
        }
    </style>
</head>
<body>
<div class="header">页面头部</div>

<div ><img class="pic1" src="images/resume.jpg"></div>

<div class="box"></div>
</body>
</html>

3.流体布局(宽度给百分比,高度给准确值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式布局</title>

    <style type="text/css">
        ul,li{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        .menu{
            height: 50px;
        }

        .menu li{
            /*第一种解决宽度超过的方法:
              使用calc计算*/
            /*width: calc(25% - 4px);*/
            width: 25%;
            height: 50px;
            text-align: center;
            float: left;
            line-height: 50px;
            background-color: gold;
            border: 2px solid #000;
            /*2.使用border-box*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li><a href="">菜单</a></li>
    <li><a href="">菜单</a></li>
    <li><a href="">菜单</a></li>
    <li><a href="">菜单</a></li>
</ul>
</body>
</html>

4.响应式布局(根据屏幕大小动态调整页面布局)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style type="text/css">
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        .con{
            border:1px solid #000;
            overflow: hidden;
        }

        .con li{
            width: 23%;
            height: 200px;
            background-color: gold;
            float: left;
            margin: 30px 1%;
        }

        @media (max-width: 800px) {
            .con li{
                width: 46%;
                margin: 30px 2%;
            }
        }

        @media (max-width: 500px) {
            .con li{
                width: 90%;
                margin: 30px 5%;
            }
        }


    </style>
</head>
<body>
<ul class="con">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

来源：CSDN

作者：胖哥哥飘过

链接：https://blog.csdn.net/pgg_cold/article/details/81363724

标签

background-size

viewport