媒體查詢+rem+less 自適應

1、根據媒體查詢設置html的font-size的大小，less代碼如下：

//假設手機設置為10等分，html的字體大小等於屏幕大小除以10 

@no:10;
@media screen and (min-width: 320px) {
	html{
		font-size: 320px / @no; 　　　　//32px
	}
}

//375 iphone678
@media screen and (min-width: 375px) {
	html{
		font-size: 375px / @no; 　　　　//37.5px
	}
}

@media screen and (min-width: 750px) { 
　　　　html{ 
　　　　　　　　font-size: 750px / @no; 　　　　　　//75px
　　　　} 
}

2、那么rem是怎么換算的呢？我們可以簡單的舉個例子：

　　比如一張設計稿的寬度是750px(一般)，你測量了一個150像素的寬度，這個時候你要怎么設置寬度呢？

　　實際上就是 '測量的像素' / 'html的字體大小'，也就是150 / 75 = 2, css中就可以直接設置width:2rem；

　　或者width:100rem / 50;(推薦，省去計算時間) 

　　同樣的，如果設計稿上的寬度為375px,你測量一個75像素的寬度，同樣按照公式： 75 / 37.5 = 2，css中寬度直接設置為width:2rem;

　　如何還是覺得換算麻煩，可以使用vscode里面自帶的的插件（ccsrem）,輸入px的時候會自動轉換為rem,轉換的比例可以在vscode配置修改。

　　后續需要在媒體查詢中補全其他手機的屏幕寬度大小，然后根據公式計算得到對應的font-size大小，那么就可以根據rem達到自適應的效果