meta 標簽

<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相結合

              設計圖 750px, 即 100vw = 750px

                                          1px     = 0.1333333vw

                                          1000px = 133.3333vw 

                                          1rem = 1個html字體的大小

                                          所以，設計如下樣式，然后所有的設計稿像素 / 1000再加 rem即可

  html{
            /* 網頁中字體大小最小是12px(0除外) 
                如果我們設置了一個小于12px的字體，則字體自動設置為12px
                - 100vw : 一個視口的寬度(即name="viewport" content="width=device-width))
                - 1vw   : 1%個視口的寬度
                100vw = 750px(設計圖)
                0.1333333vw = 1px
                133.33333   = 1000px
            */
            font-size: 133.33333vw;
        }
        *{
            margin:0; padding:0;
        }
        .box1{
            /* -- 1 rem = 1 html字體的大小
               -- 1 rem = 1000px(設計圖) 
                按照 750px的設計圖，所有的像素 除以 1000加上rem即可
                比如： 100px;  寫成 0.1rem
               */
            width: 0.1rem;  
                   /* 寬 100 px */
            height:0.05rem;
                   /* 高 50px */
            background-color: green;
        }

方法二.

將HTML、body的font-size 設置成100px;

每次只需將 設計稿的寬度調成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實現

1.核心代碼

//designWidth:設計稿的實際寬度值，需要根據實際設置
//maxWidth:制作稿的最大寬度值，需要根據實際設置
//這段js的最后面有兩個參數記得要設置，一個為設計稿實際寬度，一個為制作稿最大寬度，例如設計稿為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 設置好后才能執行 refreshRem，不然 refreshRem 會執行2次；
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止執行兩次
		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>標簽里面；

        2）根據設計稿調整后面的參數

        3）使用1rem=100px轉換你的設計稿的像素，例如設計稿上某個塊是100px*300px,換算成rem則為1rem*3rem。