自适应相关

css 像素（现实不存在，逻辑上存在）

物理像素（现实存在，像素点和CSSpx 虽然写的一样但不是一个东西）

相关概念

JS获取像素比dpr :

window.devicePixelRatio

图片的高清显示

位图和矢量图

移动端高清图片显示（更具DPR自动匹配到相应的图片）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片的高清显示</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }

        /* 切记 按从小到大的匹配  匹配到后 就不会匹配到后面 */
        @media screen and (-webkit-min-device-pixel-ratio:2) {
            .box {
                border: 2px solid blue;
                content: url('./imgs/2x.png')
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio:3) {
            .box {
                border: 2px solid skyblue;
                content: url('./imgs/3x.png')
            }
        }
    </style>
</head>

<body>
    <img src="./imgs/1x.png" class="box" alt="">
</body>

</html>

View Code

PC端视口相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC端视口</title>
    <style>
        body{
            height: 9000px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        console.log("最干净的显示区域: ",document.documentElement.clientWidth);
        console.log("最干净的显示区域+滚动条: ",window.innerWidth);
        console.log("最干净的显示区域+滚动条+浏览器边框: ",window.outerWidth);
        console.log("与浏览器无关，当前设备显示分辨率横向的值: ",screen.width);
    </script>
</body>
</html>

View Code

移动端

布局视口大多数厂商都定的980px

视觉视口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 350px;
        height: 100px;
        background: skyblue;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");
      box.innerHTML =
        "布局视口" + document.documentElement.clientWidth + "<br/>";
      /*
         移动端获取视觉视口的方式:window.innerWidth;
         不过在Android2,Opera mini,US8中无法中却获取(一般不通过代码看视觉视口)
         视觉视口 默认跟布局视口一样宽 默认980px
         视觉视口 是布局视口缩放下的状态
        */
      box.innerHTML += "视觉视口" + window.innerWidth;

      /*
    描述你的屏幕
    现在以你的Iphone5 为例(横向上)
    物理像素:750px
    设备独立像素:375px
    css像素:980px;
    */
    </script>
  </body>
</html>

View Code

理想视口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 350px;
        height: 100px;
        background: skyblue;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
        // 开启理想视口后   布局视口和屏幕等宽,
         let box = document.getElementById("box");
            box.innerHTML =
        "布局视口" + document.documentElement.clientWidth + "<br/>";

    /*
    描述你的屏幕
    现在以你的Iphone5 为例(横向上)
    物理像素:750px
    设备独立像素:375px
    css像素:980px;
 
    与屏幕等宽的布局视口,称之为理想视口,所以也可以说理想视口是一种标准: 让布局视口宽度与屏幕等宽(设备独立像素),靠meta标签上实现
   

    理想视口的特点
    布局视口和屏幕等宽,以Iphone6为例,符合理想视口标准之后:
    设备独立橡树:375px
    布局视口宽度:375px
    用户不需要缩放,滚动就能看见网站的全部内容
    要为移动端设备单独设计一个移动端网站.

    实现理想视口的具体方法:
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    */
    </script>
  </body>
</html>

View Code

PC端缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: blue;
            margin:20px 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        //监控浏览器窗口的变化 
        window.onresize=()=>{
            /*
            PC 端的缩放
            浏览器的缩放的实现是:如果放大 则将浏览器初始快缩小 在讲视口拉升到真个浏览器页面,则所看到的元素变大,css值不变
            */
            console.log('浏览器初始化块: '+document.documentElement.clientWidth)
        }
    </script>
</body>
</html>

View Code

移动端适配加上这句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">

viewport 适配很简单这个标签写死之后设计稿咋写就咋写

<meta name="viewport" content=" width=375" >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewpor 适配方式 假如设计稿 宽度375px -->
    <meta name="viewport"  content=" width=375">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #demo{
            width: 345px;
            height: 150px;
            background: #8faadc;
            margin: 0 auto;
            margin-top: 15px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

View Code

em 与rem

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em与rem适配</title>
    <style>
      html,
      body {
        font-size: 40px;
      }
      #demo1 {
        width: 400px;
        height: 400px;
        background: skyblue;
        font-size: 40px;
      }
      /* #demo2{
          //rm 相对于父元素字体而言
            width: 5em;
            height: 5em;
            background:blue;
        } 
        */
      /* rem */
      #demo2 {
        /* rem相当于根元素字体而言 */
        width: 5rem;
        height: 5rem;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="demo1">
      <div id="demo2"></div>
    </div>
  </body>
</html>

View Code

适配方案一(淘宝百度适配方案) 推荐

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 第一步开启理想视口-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
    />
    <title>rem适配方案一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #demo{
            width: 3.45rem;
            height: 1.5rem;
            margin: 0 auto;
            background-color: blue;
            margin-top: 0.15rem;
            /* 边框不参与适配 */
            /* border: 1px solid black; */
            border:0.01rem solid black;
        }
    </style>
  </head>
  <body>
      <div id="demo"></div>
   
    <script>
        //时实适配
        window.onresize=adapter;

    /* 第二部计算根字体的设备独立像素 */
       function adapter(){
      /*
         获取手机横向的设备独立像素
         开启理想视口后  视觉视口=设备独立像素
        */
       //获取手机很想的设备独立像素
       const dip=document.documentElement.clientWidth;
       //计算跟字体大小(100是我们直接指定的.375是设计稿的宽度)
       const rootFontSize=(dip*100)/375;
       //设置根字体
       document.documentElement.style.fontSize=rootFontSize+'px';
       }
    </script>
  </body>
</html>

View Code

适配方案二(搜狐唯品会)

前锋写法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript">
    var ratio = window.devicePixelRatio;
    var meta = document.querySelector("[name=viewport]");
    meta.setAttribute("content", 
    `width=device-width,initial-scale=${1/ratio},user-scalable=no`);

    document.documentElement.style.fontSize=window.innerWidth/750*100+"px";

</script>

<style>


    *{
        margin: 0;
        padding: 0;
    }
    html{
        font-size: 100px;
    }
    .box{
        width: 7.5rem;
        height: 1rem;
        background: red;
    }
</style>
</head>
<body>
    <div class="box">
        
    </div>

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 第一步开启理想视口-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
    />
    <title>rem适配方案一(配合less 使用   推荐插件easy less插件)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #demo{
            /* 计算  width=375/fontSize */
            width: 9.2rem;
            height: 4rem;
            background-color: blue;
            margin: 0 auto;
            margin-top: 0.4rem;
            /* 边框不参与适配 */
            /* border: 1px solid black; */
            border:0.02rem solid black;
        }
    </style>
  </head>
  <body>
      <div id="demo"></div>
    <script>
        //时实适配
        window.onresize=adapter;

    /* 第二部计算根字体的设备独立像素 */
       function adapter(){
      /*
         获取手机横向的设备独立像素
         开启理想视口后  视觉视口=设备独立像素
        */
       //获取手机很想的设备独立像素
       const dip=document.documentElement.clientWidth;
       //计算跟字体大小(100是我们直接指定的.375是设计稿的宽度)
       const rootFontSize=(dip/10);
       //设置根字体
       document.documentElement.style.fontSize=rootFontSize+'px';
       }
    </script>
  </body>
</html>

View Code

vw 适配（兼容没rem兼容好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>vw适配</title>
<!-- 
100vw=100%宽度
1vw 占具宽度的百分1
设计稿宽度375px
demo盒子宽度345px
    高150px
则 width=345/375 vw；
高 height=150/375 vw
 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #demo{
            width: 92vw;
            height: 40vw;
            background: blue;
            margin: 0 auto;
            margin-top:4vw;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

View Code

边框是否参与适配

一物理像素物理边框（）

解决一物理像素的边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #demo{
            width: 3.45rem;
            height: 1.45rem;
            margin: 0 auto;
            margin-top:0.15rem;
            background: blue;
            border:1px solid black
        }
        @media screen and (-webkit-min-device-pixel-ratio:2){
           #demo{
               border:0.5px solid green;
           } 
        }
        @media screen and (-webkit-min-device-pixel-ratio:3){
            #demo{
                border:0.33px solid red; 
            }
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>

        window.onresize=adapter;
        function adapter(){
            let dip=document.documentElement.clientWidth;
            let rootFontSize=(dip*100)/375;
            document.documentElement.style.fontSize=rootFontSize+"px";
        }
    </script>
</body>

</html>

View Code

posted @ 2022-01-25 12:23 还有什么值得拥有阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

!加油吧骚年！

自适应相关

公告