剛看了一篇真正教會你開發移動端頁面的文章(二)，文章寫的很清楚，現總結下他的核心思想及自己所查閱的一些資料：

假設設計稿是iPhone6(iPhone6設備像素為750px；設備像素比為2，即其適口尺寸為375px)上有200px的方塊box：

一、關于普通元素尺寸：

(一)、box的大小無論在什么設備下大小都是固定的

body{????????margin:?0;????????padding:?0;

}????.box{????????width:?200px;????????height:?200px;????????background:?red;

}????

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');????

(二)、box的大小隨著屏幕的寬度大小變化而按比例變化(方法一)

body{????????margin:?0;????????padding:?0;

}????.box{????????width:?2.6666667rem;

/*?200?(box設計的寬度)?/?75(設備像素寬度的十分之一)=?2.6666667?*/

height:?2.66666667rem;????????background:?red;

}????

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';????

注：document.documentElement.clientWidth 為布局視口尺寸，iPhone5為320px，iPhone6為375px；

當然如果設計稿是iPhone5(設計稿的寬度為640px)，則1rem 為64px，那么box寬高應該為200/64=3.125rem

這種方法我們可以看到需要一些換算過程，也許你會覺得繁瑣，其實不然，我們可以借助less來完成，例如：//?例如:?.px2rem(height,?200);.px2rem(@name,?@px){

@{name}:?@px?/?75?*?1rem;

}

因此，對于200px 的寬高，我們可以這樣寫：.px2rem(width,?200);.px2rem(height,?200);

在iPhone6下 ?HTML就會轉換成.px2rem(width,?2.6666667?rem);.px2rem(height,?2.6666667?rem);

因此不需要我們自己親自計算。

(三)、box的大小隨著屏幕的寬度大小變化而按比例變化(方法二)

對于iPhone6的設計稿來說(設計稿總寬度尺寸為750px)，先設置html的font-size為100px；(也就是1rem)，這樣總寬度為7.5rem，我們就以頁面總寬7.5rem為基準，對于iPhone6的適口寬度(375px)來說，我們可以設置font-size為375/7.5=50px；對于iPhone5的適口寬度(320px)來說，我們可以設置font-size為320/7.5=42.6666667px；也就是document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

因此對于設計稿中的200px寬高，我們直接使用200px/100px=2 也就是2rem即可，無論在什么設備下，都會等比例縮放；

body{????????margin:?0;????????padding:?0;

}????.box{????????width:?2rem;????????height:?2rem;????????background:?red;

}????

document.documentElement.style.fontSize?=?document.documentElement.clientWidth?/?7.5?+?'px';????

當然，這是對于iPhone6的設計稿來說的，如果對于iPhone5的設計稿(總寬為640px)，我們可以同樣采用先設置html的font-size為100px，這樣總寬度為6.4rem，200px的box則為2rem， ? ?對于iPhone5的適口寬度來說，我們可以設置font-size為320px/6.4=50px(200px的box還是為2rem即100px)；

對于iPhone6的適口寬度來說，我們可以設置font-size為375/6.4=58.59375px(200px的box還是為2rem即117.1875px)；

因此可將上面的代碼中的document.documentElement.style.fontSize部分改為

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; 即可；

相關文章： 動態rem簡單示例

相關插件：gulp-postcss、postcss-pxtorem 、gulp-posthtml、posthtml-postcss、postcss-pxtorem

二、關于字體尺寸

對于字體，不建議使用rem單位而是采用媒體查詢；

例如：@media?screen?and?(max-width:?321px)?{????body?{????????font-size:16px

}

}

@media?screen?and?(min-width:?321px)?and?(max-width:400px)?{????body?{????????font-size:17px

}

}

@media?screen?and?(min-width:?400px)?{????body?{????????font-size:19px

}

}

作者：該帳號已被查封

鏈接：https://www.jianshu.com/p/dffa036d7595

總結

以上是生活随笔為你收集整理的移动端设置html的字体尺寸,移动端开发元素及字体尺寸适配基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。