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è)計(jì)圖 750px, 即 100vw = 750px
1px = 0.1333333vw
1000px = 133.3333vw
1rem = 1個(gè)html字體的大小
所以，設(shè)計(jì)如下樣式，然后所有的設(shè)計(jì)稿像素 / 1000再加 rem即可
html{
/* 網(wǎng)頁(yè)中字體大小最小是12px(0除外)
如果我們?cè)O(shè)置了一個(gè)小于12px的字體，則字體自動(dòng)設(shè)置為12px
- 100vw : 一個(gè)視口的寬度(即name="viewport" content="width=device-width))
- 1vw : 1%個(gè)視口的寬度
100vw = 750px(設(shè)計(jì)圖)
0.1333333vw = 1px
133.33333 = 1000px
*/
font-size: 133.33333vw;
}
*{
margin:0; padding:0;
}
.box1{
/* -- 1 rem = 1 html字體的大小
-- 1 rem = 1000px(設(shè)計(jì)圖)
按照 750px的設(shè)計(jì)圖，所有的像素 除以 1000加上rem即可
比如： 100px; 寫(xiě)成 0.1rem
*/
width: 0.1rem;
/* 寬 100 px */
height:0.05rem;
/* 高 50px */
background-color: green;
}方法二.
將HTML、body的font-size 設(shè)置成100px;
每次只需將 設(shè)計(jì)稿的寬度調(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;}}方法三： 通過(guò)JS實(shí)現(xiàn)
1.核心代碼
//designWidth:設(shè)計(jì)稿的實(shí)際寬度值，需要根據(jù)實(shí)際設(shè)置
//maxWidth:制作稿的最大寬度值，需要根據(jù)實(shí)際設(shè)置
//這段js的最后面有兩個(gè)參數(shù)記得要設(shè)置，一個(gè)為設(shè)計(jì)稿實(shí)際寬度，一個(gè)為制作稿最大寬度，例如設(shè)計(jì)稿為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 會(huì)執(zhí)行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執(zhí)行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器后退的時(shí)候重新計(jì)算
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）將上面的代碼引入到你的頁(yè)面<script>標(biāo)簽里面；
2）根據(jù)設(shè)計(jì)稿調(diào)整后面的參數(shù)
3）使用1rem=100px轉(zhuǎn)換你的設(shè)計(jì)稿的像素，例如設(shè)計(jì)稿上某個(gè)塊是100px*300px,換算成rem則為1rem*3rem。
