1. <strong id="d2o2m"><address id="d2o2m"><rp id="d2o2m"></rp></address></strong>

    <acronym id="d2o2m"></acronym>
    <acronym id="d2o2m"><sup id="d2o2m"><nav id="d2o2m"></nav></sup></acronym>
    <optgroup id="d2o2m"><em id="d2o2m"><del id="d2o2m"></del></em></optgroup>
    <ol id="d2o2m"></ol>
  2. 手機端的適配

    時間:2022-03-23 09:01:58 類型:HTML/CSS
    字號:    

    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">

    將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。


    黄片基地 <