手機自適應的單位rem，與自適應網頁的區別

標籤：織夢   ready   max   body   移動站   自適應   像素   定製   ted   

一個網站有的會分為pc站和移動站，有的網站只有pc站，而現在更多的是自適應的網站。
現在針對自適應的網頁設計有很多模板，如bootstrap，它會讓你輕鬆定製一個只適應網站，而現在大多數的網站並不是靠程式員憑空開發的前端與後端，都會運用已經成熟的架構建立自己的網站，如一些整合很好的wordpress架構，和織夢dede等。
自適應的頁面，只需要監測不同的螢幕尺寸，使用@media（），寫出不同尺寸下的不同尺寸即可.

而現在更多的人使用手機，這就使網頁的使用者體驗度更好，很多大公司都會採用pc站和移動站分開設計。
前端開發人員會使用PX，em，rem等單位在設計網頁中體現
在最開始的時候我會使用px，這樣可以把UI設計稿一個px不差的，完美的設計出來，會使用@media做自適應調整，一個自適應的網站就設計好了。
REM單位：我想說REM單位更適應於製作移動端的網頁
網上有很多版本的手機調適型配置的版本介紹

1.使用@media()做自適應

html{    font-size:1em;}@media only screen and (min-width: 371px){    html {font-size:66%;}  }  @media only screen and (min-width: 401px){      html {font-size: 80%;}  }  @media only screen and (min-width: 428px){      html {font-size: 50%;}  }

 

2.使用js控制元素font-szie的大小

<script type="text/javascript">(function(e,t){var i=document,n=window;var l=i.documentElement;var r,a;var d,o=document.createElement("style");var s;function m(){var i=l.getBoundingClientRect().width;if(!t){t=540}if(i>t){i=t}var n=i*100/e;o.innerHTML="html{font-size:"+n+"px;}"}r=i.querySelector(‘meta[name="viewport"]‘);a="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";if(r){r.setAttribute("content",a)}else{r=i.createElement("meta");r.setAttribute("name","viewport");r.setAttribute("content",a);if(l.firstElementChild){l.firstElementChild.appendChild(r)}else{var c=i.createElement("div");c.appendChild(r);i.write(c.innerHTML);c=null}}m();if(l.firstElementChild){l.firstElementChild.appendChild(o)}else{var c=i.createElement("div");c.appendChild(o);i.write(c.innerHTML);c=null}n.addEventListener("resize",function(){clearTimeout(s);s=setTimeout(m,300)},false);n.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(s);s=setTimeout(m,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(e){i.body.style.fontSize="16px"},false)}})(750,750);</script>

本段js代碼適合設計稿寬度為750px，定義body的字型樣式為body{font-size: 0.32rem;}，以後寫每個div的寬度，每個元素的字型大小，只用（它實際的像素除以100）rem，即可。
本人親測可以使用.PS:這段js代碼會檢測你的螢幕尺寸大小，計算相應的根字型大小，達到很好的視覺體驗。---間距合適，字型大小合適

 

 

手機自適應的單位rem，與自適應網頁的區別