4- 移动端 REM+JS 动态适配页面

作者: 崩鲨卡拉卡 | 来源:发表于2019-04-29 16:33 被阅读0次

4- 移动端 REM+JS 动态适配页面
移动端Web页面适配浅析
antd-mobile屏幕适配方案: flexible+px2r
meta-viewport
meta viewport移动端自适应
解决vue移动端适配问题
移动端适配
记一次前端技术分享（移动端相关概念讲解）
移动端如何适配？
解决vue移动端适配问题

1.百分比+固定高度布局方案

固定屏幕为理想视口宽度
少许的媒体查询设置字体
水平百分比布局
水平方向部分也可以使用弹性布局

2.Rem解决方案

Rem的大小取值：根据页面的dpr动态改变
Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度(client_width)
chrome浏览器字体小于12px（会被重置为12px)

3.固定设计稿的宽度开发+根据设备动态适配缩放

开发直接按照设计稿编写固定尺寸元素
页面加载完成后用js动态根据dpr改变页面的缩放值
推荐使用： flexible方案

重点方式：

1.REM+JS 动态适配页面

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>REM+JS动态适配尺寸</title>
   <style>
       html,div,ul,li,body{
           padding: 0;
           margin: 0px;
       }
       html{
           font-size: 100px;
       }

       .box{
           height: 1rem;
           width: 1rem;
           border: 1px solid red;
           box-sizing: border-box;
       }
   </style>
</head>
<body>
   <div class="box">

   </div>
   <script>
       (function(win,doc){
           // 1.获取 client 屏幕宽度
          let clien_width=doc.documentElement.clientWidth||doc.body.clientWidth;
           
           // 2.如果屏幕的宽度发生改变 触发 onresize 方法
           window.onresize = function(){
               let new_width=doc.documentElement.clientWidth||doc.body.clientWidth;
               console.log("尺寸："+new_width);
               fn(new_width);
           }

           //3. 【原始宽度】  或者  【改变后的宽度】 经过换算，赋值到 html=>style=>font-size    640px 是设计稿的原始尺寸
           var fn=function(width){  

             let newWidth=doc.documentElement.style.fontSize=100*(width/640)+"px";
             console.log( "屏幕尺寸："+clien_width);
             console.log(newWidth);
           }
           fn(clien_width);
       })(window,document)
   
   </script>
</body>
</html>

JS响应式宽度.jpg