<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      手機端的適配

      時間: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。


      黄网站免费 <