<th id="jonck"><track id="jonck"></track></th>
<progress id="jonck"></progress>
    1. <progress id="jonck"></progress>

    2. <button id="jonck"><acronym id="jonck"></acronym></button>

    3. 小程序APP網(wǎng)站定制開(kāi)發(fā)專(zhuān)家

      手機wap端頁(yè)面rem布局自適應所有客戶(hù)端

        

      rem布局非常簡(jiǎn)單,首頁(yè)你只需在頁(yè)面引入這段原生js代碼就可以了


        (function (doc, win) {
              var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if (!clientWidth) return;
                      if(clientWidth>=640){
                          docEl.style.fontSize = '100px';
                      }else{
                          docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                      }
                  };
      
              if (!doc.addEventListener) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window);


        如何使用?

        這是rem布局的核心代碼,這段代碼的大意是:

        如果頁(yè)面的寬度超過(guò)了640px,那么頁(yè)面中html的font-size恒為100px,否則,頁(yè)面中html的font-size的大小為: 100 * (當前頁(yè)面寬度 / 640)

        于是,問(wèn)題來(lái)了,為什么要這樣?別急,我先來(lái)一一回答

        為什么是640px?

        對于手機屏幕來(lái)說(shuō),640px的頁(yè)面寬度是一個(gè)安全的最大寬度,保證了移動(dòng)端頁(yè)面兩邊不會(huì )留白。注意這里的px是css邏輯像素,與設備的物理像素是有區別的。如iPhone 5使用的是Retina視網(wǎng)膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以設備像素數為640 x 1136px,而它的CSS邏輯像素數為320 x 568px。

        如果要切移動(dòng)端頁(yè)面,你可以先把效果圖寬度等比例縮放到640px,很好用。

        為什么要設置html的font-size?

        rem就是根元素(即:html)的字體大小。html中的所有標簽樣式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大膽的用rem作單位。

        如果你把html的font-size設為20px,前面說(shuō)過(guò),rem就是html的字體大小,那么1rem = 20px。

        此時(shí),此時(shí)寬60px,高40px的元素樣式就這樣設置如下 ↓


         width: 3rem;
        height: 2rem;


        那要是寬55px,高37px呢?然后經(jīng)過(guò)換算,,設置如下 ↓


        width: 2.75rem;
        height: 1.85rem;


        是不是發(fā)現這換算起來(lái)有點(diǎn)麻煩啊,,,(當然,你要是心算帝請無(wú)視)

        如果我們一開(kāi)始把html的font-size設為100px呢?此時(shí)1rem = 100px,那么上面的寬55px,高37px的元素樣式就可以這么設置 ↓

         width: 0.55rem;
        height: 0.37rem;

        是不是換算起來(lái)簡(jiǎn)單多了?!

        (當然可能有同學(xué)問(wèn),為什么不一開(kāi)始把html的font-size設為1px呢,這樣換算起來(lái)也簡(jiǎn)單,答:瀏覽器一般都有最小字體限制,比如谷歌瀏覽器,最小中文字體就是12px,所以實(shí)際上沒(méi)有辦法讓1rem=1px。)

        根據上面的js代碼,如果頁(yè)面寬度低于640px,那么頁(yè)面中html的font-size也會(huì )按照(當前頁(yè)面寬度/640)的比例變化。這樣,頁(yè)面中凡是應用了rem的作尺寸單位的元素都會(huì )隨著(zhù)頁(yè)面變化而等比例縮放了!

        都哪些情況可以用rem布局?

        大部分情況下都可以用rem布局這個(gè)方法,當然具體還要看情況而定。拿我們公司項目舉例,只有底部的導航不用rem,而是用的flex布局。因為導航點(diǎn)擊最多,所以給它一個(gè)固定的大小(其實(shí)就是高度固定,寬度自適應的方案)。大家可以看看淘寶的這個(gè)手機頁(yè)面 淘寶手機站,基本就是這種感覺(jué),底部導航和頂部搜索框用的高固定,寬自適應的方案,其余的部分基本都是隨著(zhù)瀏覽器寬度變化在等比例縮放。

        最終頁(yè)面代碼首頁(yè)代碼大致如下

      <!DOCTYPE html>
      <html lang="en">
      <head> 
       <meta charset="UTF-8">  
       <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
      <script>   
      (function (doc, win) {
              var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if (!clientWidth) return;
                      if(clientWidth>=640){
                          docEl.style.fontSize = '100px';
                      }else{
                          docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                      }
                  };
      
              if (!doc.addEventListener) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window);
      </script> 
       /*你引進(jìn)的資源*/
      <title>標題</title> 
      </head>
      <body>
       /*你的代碼*/
      </body>
      </html>

      上一篇: [科技]基于jQuery在線(xiàn)問(wèn)卷答題系統代碼

      下一篇: 【php筆記】php整型就是整數

      在線(xiàn)客服
      在線(xiàn)客服關(guān)閉
      品智官方微信

      掃碼關(guān)注官方微信

      影音先锋在线资源资源网_日韩亚洲国产综合ΑV高清_成年女人免费视频播放大全_久久精品国产久精国产爱