移动端

最新推荐文章于 2024-07-23 08:21:53 发布

wangyuanti

最新推荐文章于 2024-07-23 08:21:53 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/wangyuanti/article/details/79076935

版权

0810

移动端配饰

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640,user-scalable=no<!--禁止缩放-->">
    <title>Title</title>
    <style>
        .box{
            width:400px;
            height:400px;
            border:1px solid #0e3757;
        }
    </style>

    <!--
        meta相关

            name="viewport" 设置视口
            content
                width=device-width 还原设备宽度

                    如果你做的移动端页面只需要放在微信里面运行的话
                    直接给一个640的宽度

                initial-scale 像素初始比例
    -->


    <!--

         iPhone 5s      640 * 1136    320 * 568

         iPhone 6       750 * 1334'   375 * 667

         iPhone 6 Plus  1080 * 1920  1242 * 2208

         分辨率大的手机  显示更清楚

        需求
            1， 设备有多宽就显示多宽
            2,  如何在移动端写一条一个像素的边框/线
            3， 还原设备原本的分辨率
            4， 我还要动态改变像素比

        手机上 电脑上看图片  哪个更清晰？
        ppi
    -->
</head>

动态设置像素比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var pixelRatio = 1/window.devicePixelRatio;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +'">');
    </script>
    <style>

    </style>
    <!--
        动态的去改变初始比例
        1/2    0.5
        1/3    0.3333

        让一个像素只做一个像素的事情

        window.devicePixelRatio 获取设备的像素比

        width=device-width 设备默认的宽度
        initial-scale 初始比例
        minimum-scale 允许缩放的最小比例
        maximum-scale 允许缩放的最大比例
    -->
</head>
<body>
<div class="box"></div>
</body>
</html>

第一个移动端界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var pixelRatio = 1/window.devicePixelRatio;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +'">');
        window.onload = function(){
            document.body.style.fontSize = document.documentElement.clientWidth/20 + 'px';
        }
    </script>
    <link href="css/style.css" rel="stylesheet">
    <!--

        640  / 20       32 *1 0
        750  / 20       37.5
        1242 / 20       62.1

        需求
           等比例缩放适应每个设备

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

复杂一点的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var pixelRatio = 1/window.devicePixelRatio;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +'">');
        window.onload = function(){
            document.documentElement.style.fontSize = document.documentElement.clientWidth/20 + 'px';
        }
    </script>
    <link href="css/style.css" rel="stylesheet">
    <!--
        问题来了
            em 是相对自己或者父级的文字大小来计算的
            px
            %
            rem    r  root   em  始终相对于html的文字大小来计算的

    -->
</head>
<body>
<div class="box"><a href="#"></a></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>