webApp 之基本概念基本概念

77 阅读 0 评论 51 点赞

我是靠谱客的博主柔弱路人，最近开发中收集的这篇文章主要介绍webApp 之基本概念基本概念，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

基本概念

1.屏幕尺寸
屏幕对角线的长度；

2.分辨率
横纵方向上的物理像素的个数乘积；

3.像素密度
对角线的像素/尺寸=像素密度；

4.css像素
css像素是和浏览器相关的，是一个抽象概念；
最终转换成一个物理像素，显示到屏幕上；
浏览器的最小单位；
一个css像素占据多少个物理像素，取决于屏幕的特性（高清屏，用户缩放等）；

5.位图像素
一张图片的尺寸，一个位图像素占据一个物理像素才是完美显示；
图片的最小单位；

6.设备独立像素
设备独立像素=css像素；

7.像素比（DPR）
像素比 = 物理像素/设备独立像素；
也就是同样的屏上，一个设备独立像素=像素比* 物理像素；

8.布局视口
当手机浏览器要完成显示一个pc网页的时候，要不出现横向滚动条的，
必须要一个容器吧这个网页放下，这个容器就是布局视口。
布局视口的宽度一般是980或者1024 css像素。
布局视口的大小和网页的尺寸大小是一致的；

9.视觉视口
就是用户看到的css像素的尺寸；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .test {
            width: 375px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="test" class="test">test</div>
<script type="text/javascript">
    window.onload = function () {
        let div = document.getElementById("test");
        div.onclick = function () {
            //布局视口尺寸；
            //pc端放大缩小时，视觉视口和布局视口都会是变得；
            //移动端放大缩小布局视口尺寸是不变的，视觉视口是会变的；
            div.innerHTML = document.documentElement.clientWidth;
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这个当元素尺寸超过了视觉视口的时候是不会出现滚动条的-->
    <!--<meta name="viewport" content="width=device-width">-->

    <!--完美显示  会出现滚动条-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .test {
            width: 375px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        body{
            background: yellow;
        }
    </style>
</head>
<body >
    <div id="test" class="test">test</div>
</body>
</html>

系统缩放：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--系统缩放模式：在理想视口的基础上显示放大两倍，但是布局视口和视觉视口都缩放一倍；-->
    <meta name="viewport" content="initial-scale=2.0">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .test {
            width: 375px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="test" class="test">test</div>
</body>
</html>

禁止缩放：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--下面三个属性禁止了android 和 ios的 缩放功能-->
    <!--minimum-scale=1.0,-->
    <!--maximum-scale=1.0,-->
    <!--user-scalable=no"-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    >
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .test {
            width: 375px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }

        body {
            background: yellow;
        }
    </style>
</head>
<body>
<div id="test" class="test">test</div>
</body>
</html>