meta 標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no">
方法一： px,vw與rem相結(jié)合
設(shè)計圖 750px, 即 100vw = 750px
1px = 0.1333333vw
1000px = 133.3333vw
1rem = 1個html字體的大小
所以，設(shè)計如下樣式，然后所有的設(shè)計稿像素 / 1000再加 rem即可
html{
/* 網(wǎng)頁中字體大小最小是12px(0除外)
如果我們設(shè)置了一個小于12px的字體，則字體自動設(shè)置為12px
- 100vw : 一個視口的寬度(即name="viewport" content="width=device-width))
- 1vw : 1%個視口的寬度
100vw = 750px(設(shè)計圖)
0.1333333vw = 1px
133.33333 = 1000px
*/
font-size: 133.33333vw;
}
*{
margin:0; padding:0;
}
.box1{
/* -- 1 rem = 1 html字體的大小
-- 1 rem = 1000px(設(shè)計圖)
按照 750px的設(shè)計圖，所有的像素 除以 1000加上rem即可
比如： 100px; 寫成 0.1rem
*/
width: 0.1rem;
/* 寬 100 px */
height:0.05rem;
/* 高 50px */
background-color: green;
}方法二.
將HTML、body的font-size 設(shè)置成100px;
每次只需將 設(shè)計稿的寬度調(diào)成640 然后 除以 100
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}方法三： 通過JS實現(xiàn)
1.核心代碼
//designWidth:設(shè)計稿的實際寬度值，需要根據(jù)實際設(shè)置
//maxWidth:制作稿的最大寬度值，需要根據(jù)實際設(shè)置
//這段js的最后面有兩個參數(shù)記得要設(shè)置，一個為設(shè)計稿實際寬度，一個為制作稿最大寬度，例如設(shè)計稿為750，最大寬度為750，則為(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會執(zhí)行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執(zhí)行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器后退的時候重新計算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);2.使用方法
1）將上面的代碼引入到你的頁面<script>標(biāo)簽里面；
2）根據(jù)設(shè)計稿調(diào)整后面的參數(shù)
3）使用1rem=100px轉(zhuǎn)換你的設(shè)計稿的像素，例如設(shè)計稿上某個塊是100px*300px,換算成rem則為1rem*3rem。
