移動端適配

時間 2019-11-10

標籤移動適配欄目無線简体版

原文原文鏈接

適配的方式：
一、百分比適配方式：css

根據父級算百分比，需配合其餘佈局使用html

例：css3

四個div 設置高度後，四份div平分，各佔25%app

二、viewport縮放適配佈局

把全部機型的css像素設置成一致的字體

這個方案是以375爲標準，對大屏不友好，有弊端spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,
 6     minimum-scale=1,maximum-scale=1" id="view">
 7     <title>Document</title>
 8     <style>
 9         body {
10             margin: 0;
11 
12         }
13 
14         .box div {
15             width: 93.75px;
16             height: 100px;
17             float: left;
18         }
19 
20         .box div:nth-child(1) {
21             background: red
22         }
23 
24         .box div:nth-child(2) {
25             background: blue
26         }
27 
28         .box div:nth-child(3) {
29             background: yellowgreen
30         }
31 
32         .box div:nth-child(4) {
33             background: pink
34         }
35     </style>
36     <script>
37         (function(){
38             // 獲取css像素值（也就是獲取html的寬） （前提是viewport沒縮放）三種方法：
39             var curWidth = document.documentElement.clientWidth;
40             var curWidth = window.innerWidth;
41             var curWidth = window.screen.width;
42 
43             // 聲明一個目標值
44             var targetWidth = 375; //是iphon6的像素值
45 
46             //縮放比
47             var scale = curWidth/targetWidth;
48             
49             //選擇meta標籤中的內容 view.content 再改變縮放比
50             var view = document.getElementById('view');
51             
52             view.content = 'initial-scale='+scale+',user-scalable = no, minimum-scale='+scale+',maximum-scale='+scale+''
53             console.log(view.content)
54         })();
55     </script>
56 </head>
57 
58 <body>
59     <img src="./images/123.jpg" alt="">
60     <div class="box">
61         <div></div>
62         <div></div>
63         <div></div>
64         <div></div>
65     </div>
66 </body>
67 
68 </html>

三、DPR縮放適配scala

把css像素縮放成與設備像素同樣大的尺寸3d

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <!-- <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,
 7     minimum-scale=1,maximum-scale=1" id="view"> -->
 8     <title>Document</title>
 9     <style>
10         body {
11             margin: 0;
12 
13         }
14 
15         .box div {
16             width: 25%;
17             height: 100px;
18             float: left;
19         }
20 
21         .box div:nth-child(1) {
22             background: red
23         }
24 
25         .box div:nth-child(2) {
26             background: blue
27         }
28 
29         .box div:nth-child(3) {
30             background: yellowgreen
31         }
32 
33         .box div:nth-child(4) {
34             background: pink
35         }
36     </style>
37     <script>
38         (function () {
39             // 獲取元素
40             var meta = document.querySelector('meta[name="viewport"]');
41             var scale = 1 / window.devicePixelRatio; //  1/dpr
42             if (!meta) {
43                 // 這個條件成立說明用戶沒寫meta標籤，須要建立一個
44                 meta = document.createElement('meta');
45                 meta.name = 'viewport';
46                 // 此時不須要去掉width=device-width，由於物理像素大於css像素，取寬度會取大的值，initial-scale大，
47                 //  因此width=device-width能夠不去掉
48                 meta.content = 'width=device-width, initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + ''
49                 document.head.appendChild(meta);
50             } else {
51                 meta.setAttribute('content', 'width=device-width, initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + '')
52             }
53         })();
54     </script>
55 </head>
56 <body>
57     <div class="box">
58         <div></div>
59         <div></div>
60         <div></div>
61         <div></div>
62     </div>
63 </body>
64 </html>

四、rem 適配（主流）code

把全部的設備都分紅相同的若干份，再計算元素寬度所佔的份數

em:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,
 7     minimum-scale=1,maximum-scale=1" id="view">
 8     <title>Document</title>
 9     <style>
10         .em{
11            font-size:20px;
12         }
13         .em p{
14            font-size:2em;   /*  1em = 20px */
15         }
16     </style>    
17 </head>
18 <body>
19     <!--  em   做爲font-size的單位時，其表明父元素的字體大小，做爲其餘屬性單位時，表明自身字體大小 
20                    font-size:20px   1em:20px
21                    問題：
22                    1.Chrome 下有最小字體限制，必須爲12px,因此這個值不能小於12
23                    2.若是兩個同樣的元素，可是裏面字體不同，那就不能統一設置了，或者元素字體變化了，
24                    就又要統一設置一遍
25          rem    css3新增的一個相對單位， 是相對於根元素字體大小；
26                 r  root 
27                 html(font-size:20px)    2rem=40px
28     -->
29      <div class="em">
30          <p>em-放到了房間</p>
31      </div>
32 </body>
33 </html>