在html篇里提到設置視口寬度和設備寬度，固定的meta配置就是寫死的，死記硬背
應該清楚的是手機端的適配應該克服的難題就是寬度根據手機屏幕的大小變化，而高度卻沒有辦法跟隨比例變化，也就是寬高比，比如在手機上要一行上排列三個div放正方形的三個div，要怎么做，三個div浮動排列后各自設置width為33.3%，那高度呢，在pc端可以直接100*100，但是手機不行，不等比排列太難看了，並且pc的字體就是固定的16px或者14px，但是手機有大小的區別，也應該根據手機變化，這就是手機適配要解決的
兩個方案
- 一個是rem
- 一個vw，vh的css3的api
在css里有px和em還有rem
- px就是固定的，是指一個視口像素，而不是設備像素，很高深，不用深究，px是個固定的計量單位
- em是相對父元素的字體大小的大小，比如父元素的字體大小是16px，那1em就是16px，他不是個固定值，是個相對值，非常不常用，用處就是在一些文章的段落前用2em作為兩個字的縮進
- 而rem也是個相對值，但相對的不是父元素的字體大小，而是html標簽的字體大小，而html就是跟手機寬度相等的存在，也就是說只要把html的字體大小設置為375px，那1rem就是375px，再把div高度設置成0.33rem,這樣就可以實現永遠正方形的div，這就是傳說中的rem適配
rem的關鍵點就是如何去給html標簽設置跟設配寬度一樣的字體大小，而現實是只能用js去實現，而且為了更好的計算，不能計算為1rem去等於設備寬度，這樣如果要10px就是零點零幾的rem，正確的做法是讓html等於10rem，15rem，20rem，我一般是用15rem，就是375/15=25，也就是1rem=25px，16px的正常字體大小就是16/25約等於0.65rem，rem的單位是可以代替所有的px的存在的，比如padding，margin，border，img-width等等都是可以用rem的，這樣不管在怎么樣大小的手機上大小，任何一個元素的寬高比都是一樣的，也就是等比縮放
// 如果看不懂js寫了什么，也不用管，固定寫法，寫進去就可以用了
window.onload = function(){
/* 第一個參數是你想讓 1rem 等於多少像素，第二個參數是設計稿的寬度 */
getRem(50,750)
};
window.onresize = function(){
getRem(50,750)
};
function getRem(prem,pwidth){
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
document.documentElement.style.fontSize = prem/pwidth*oWidth + "px";
}
#aa{
width:5rem;
font-size:0.6vw;
...
}
上面講了css的3個計量單位，而css3出現了一個新的計量單位vw , vh，這兩個是相對於手機設備寬度的固定值，相對的固定值怎么理解呢，就是不管在任何設備，100vw就是等屏幕一樣寬，100vh就是跟屏幕一樣高，所以寬高都是33.3vw的div就是一個永遠固定的正方形
#aa{
width:33.3vw;
font-size:5vw;
...
}
還可以把vw和rem合起來使用，就不用寫js的rem了
html {
font-size: calc(100vw / 3.75);
}
body {
font-size: 0.14rem;
}
2020/03/04補充
今天甲方說有個人的手機用畫布生成的海報里的手機號碼超出了畫布，但是這個手機號碼的文字大小不是固定的，是計算的，不應該會出現超出畫布的可能行，打印出來的計算結果也跟我一樣是40px，突然意識到這是手機被設置了文字倍數，因為有些人近視什么的，於是就研究了下怎么解決這個問題
<script type="text/javascript">
var rem = 50 / 750 * document.documentElement.clientWidth;
document.documentElement.style.fontSize = rem + 'px';
</script>
<body style="font-size: 0.6rem;margin: 0;">
<span style="font-size: 16px;" id="a">我</span>
<span style="font-size: 1rem;" id="b">我</span>
<span style="font-size: 10vw;" id="c">我</span>
<div style="width: 16px;" id="d"></div>
<div style="width: 1rem;" id="e"></div>
<div style="width: 10vw;" id="f"></div>
</body>
在手機瀏覽器打開上面的網頁，打印出當前window的寬度和幾個dom元素的寬度，然后再放大或者縮小系統字體，結果的到這個答案
- window的寬度不會改變
- font-size屬性都會改變
- width屬性用rem的會改變
如何讓修改了系統的用戶也
- 寬高都用px或vw-vh去做
- 對比上面的#a和#d的寬度，計算出放大或者縮小的比例，然后把原本的字體大小適配方案改成百分比，如下，然后給body添加字體大小，大概是
0.6/(2-比例)
// 舊
<span>我</span>
<span style="font-size: 0.6rem">我</span>
<span style="font-size: 0.7rem">我</span>
<span style="font-size: 0.8rem">我</span>
// 新
<span>我</span>
<span style="font-size: 100%">我</span>
<span style="font-size: 120%">我</span>
<span style="font-size: 140%">我</span>
適配問題還有，查看文章
- 1px問題
- iphoneX適配
- 橫屏適配
// JavaScript檢測橫屏
window.orientation:獲取屏幕旋轉方向
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋轉180度
console.log('豎屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕順時鍾旋轉90度或屏幕逆時針旋轉90度
console.log('橫屏');
}
});
// CSS檢測橫屏
@media screen and (orientation: portrait) {
/*豎屏...*/
}
@media screen and (orientation: landscape) {
/*橫屏...*/
}
- 圖片模糊問題
.avatar{
background-image: url(conardLi_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.avatar{
background-image: url(conardLi_2x.png);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.avatar{
background-image: url(conardLi_3x.png);
}
}