移動端的適配整理

時間 2019-11-11

標籤移動端的適配整理欄目無線简体版

原文原文鏈接

1、移動端適配html

　　方法一：viewport自適應屏幕寬度vue

　　　　　　在html中建立meta標籤：頁面的寬度等於屏幕的寬度。bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

　　方法二：框架搭建頁面瀏覽器

1. 　　bootstrap　　基於jQuery的響應工具，適用於移動端、PC、Pad等
2. 　　ElementUI（PC端）、MintUI（移動端）　　基於vue組件庫開發

2、移動端問題　框架

　　（1）、1px 邊框工具

　　　　方法一：僞元素 + transform 實現佈局

.scale-1px{
  position: relative;
}
.scale-1px::after{
  content: '';
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  border:1px solid red;
  transform: scaleY(0.5);
}

　　　　方法二：view + rem 實現字體

　　（2）、移動端佈局方式flex

　　　　　　方法一：響應式佈局flexbox

　　　　　　　　　　流式佈局 + 媒體查詢

　　　　　　方法二：彈性佈局

　　　　　　　　　　flexbox

　　　　　　方法三：rem 佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
   
        <!--移動端的視口配置 + rem的設置 ： 建議使用內聯js -->
        <script>
            //設置適口及縮放比例，目的：實現像素1:1還原    
            var ratio = 1 / (window.devicePixelRatio||1);  // window.devicePixelRatio:瀏覽器的像素比。
            document.write('<meta name="viewport" content="width=device-width,initial-scale='+ratio+',minimum-scale='+ratio+',maximum-scale='+ratio+',user-scalable=no" />')
            //設置html字體大小
            var size = document.documentElement.clientWidth/7.5; //以750尺寸計算
            //要設置的html的font-size是100px,即1rem
            document.getElementsByTagName('html')[0].style.fontSize = size + 'px';
        </script>
    </head>
    <body>
              code...
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。