適配問題
怎么適配iphone6
1px問題
為什么頁面與設計稿會出現偏差？
dpr=設備像素/ css像素因為iPhone6的DPR（設備像素比）為2，設備像素為750，所以iPhone6的理想視口尺寸為375px。
因為設計稿是基于設備像素，頁面是基于css像素的。css中的寬度是基于理想視口的（寬度375px），設計圖上是基于設備寬度750px，所以尺寸不對。
怎么處理？
init-scale=0.5缺陷：但是寬度不能自適應
??rem大法
基于
htmlfont-size手淘的做法：
把縮放尺寸設置成dpr的倒數。
讀設備寬度，動態設置meta標簽的 content屬性中的
maximunminimumuser-scable<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="" /><style>body{margin: 0;padding: 0;}.box{width: 2.66666667rem;height: 2.66666667rem;background: red;}</style>
</head>
<body><div class="box"></div><script>var scale = 1 / window.devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' scale ', maximum-scale=' scale ', minimum-scale=' scale ', user-scalable=no');document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 'px';</script>
</body>
</html>網易的做法
現在的設計稿都是750px寬度（p6的寬），那要想實現
css樣式：設計圖=1：100也就是說
1rem = 7.5px<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><style>body{margin: 0;padding: 0;}.box{width: 2rem;height: 2rem;background: red;}</style>
</head>
<body><div class="box"></div><script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 'px';</script>
</body>
</html>總結
rem是為了實現移動端自適應布局。通過在
htmlfont-size另外，手淘的做法是通過判斷設備的dpr，將縮放規模scale設置為dpr的倒數，再用js動態設置
metacontent網易的做法是，禁用用戶縮放，scale始終為1，將font-size設置為625%，即 1rem=100px。
1px問題
如何實現移動端的1px邊框
方法一：transformY:scale(50%)
transformY:scale(50%)方法二：
border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 圖片地址 上下剪切 左右剪切 上下邊寬 左右邊寬 圖片拉伸vm/vh rem大法
vm/vh是未來的趨勢
rem方式弊端：需要動態計算根字體大小
做法：用vm/vh來計算根字體大小，剩下的自適應布局依舊按照rem的方法
用vm/vh做適配頁面
??關于vm/vh
1. 與%百分比的區別
vm/vh 是基于視窗的
%基于父元素
2. 使用場景
隨著頁面不同，文字圖片縮小放大（適配頁面）
3. 與rem的區別
vm/vh沒有最大、最小寬大的限制（設備很小的時候，圖文會縮得特別特別小……）
措施：
1.解決背景過小問題
body{min-width:xxx px;max-width: xxx px;
}2.媒體查詢限制根文字大小（解決文字過小問題）
html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=0bchaa&title=移動端適配問題
)
用法小結)
