首頁 > 新聞動態(tài) > 行業(yè)動態(tài)

網(wǎng)頁制作單位深度解析

2018-09-15 14:03:29

網(wǎng)頁制作單位深度解析：

1、px：絕對單位，頁面按精確像素展示

2、em：相對單位，基準點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

em是指字體高度瀏覽器默認1em=16px,所以0.75em=12px;我們經(jīng)常會在頁面上看到根元素寫的font-size:62.5%; 這樣em就成了16px*62.5=10em;這是顯示在頁面的字體大小是10px; 這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了,
em的特點 em是個相對值他會根據(jù)父級元素的大小而變化但是如果嵌套了多個元素要計算它的大小,是件很頭疼的事情
這樣的情況下,就出現(xiàn)了rem rem的區(qū)別在于它是相對于根基元素的,因此不會被它的父類影響到

結論：之所以前端行業(yè)做移動端會普遍默認用rem或em,是因為可以通過js控制根元素(或者用@media)來達到適配各種分辨率的字體大小的效果

3、rem：相對單位，可理解為”root em”, 相對根節(jié)點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的

rem在移動端應用可參考淘寶的頁面http://m.taobao.com (html的font-size通過動態(tài)計算獲取)

方案一：簡單常用版本

頁面基準750px;html font-size值的計算：

(function(doc,win){var htmlFont=function(){var docEl=doc.documentElement,l=docEl.clientWidth,f;f=l/7.5;l>750?docEl.style.fontSize=100+"px":docEl.style.fontSize=f+"px"};htmlFont();win.addEventListener("resize",htmlFont,false)})(document,window);

注：把這段原生JS 放到 HTML 的 head 標簽中即可(需設置meta縮放比1:1）

----------分割線----------

方案二：rem 進階版--高清方案

和上面一下還是把這段原生JS 放到 HTML 的 head 標簽中即可（注:不要手動設置viewport，該方案自動幫你設置，通過修改viewport 屬性放大縮小 initial-scale）

!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);

代碼原理：

這是阿里團隊的高清方案布局代碼，所謂高清方案就是根據(jù)設備屏幕的DPR（設備像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由4個物理像素點組成）動態(tài)設置 html 的font-size, 同時根據(jù)設備DPR調整頁面的縮放值，進而達到高清效果。

代碼優(yōu)勢：

引用簡單，布局簡便
根據(jù)設備屏幕的DPR,自動設置最合適的高清縮放。
保證了不同設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解決移動端真實1px問題（這里的1px 是設備屏幕上的物理像素）

總結：
1)兩個方案默認 1rem = 100px，所以你布局的時候，完全可以按照設計師給你的效果圖寫各種尺寸啦。
2)絕不是每個地方都要用rem，rem只適用于固定尺寸！
3)比如你在效果圖上量取的某個按鈕元素長 86px, 寬27px ，那你直接可以這樣寫樣式：

	
	.div1{width:.85rem;height:.27rem;}

---------分割線----------

關于方法二要修改頁面根font-size；和viewport的比例，引出一種簡單粗暴的頁面適配，就是將設計稿按照PC的正常切圖的方法輸出后直接修改viewport的縮放比例達到想要的結果；縮放代碼如下：mate viewport標簽，用JS追加

var head=document.getElementsByTagName('head')[0],scalevalue=screen.width/750,metaTag=document.createElement('meta');metaTag.setAttribute('name','viewport');metaTag.setAttribute('content','width='+scalevalue+',initial-scale='+scalevalue+',maximum-scale='+scalevalue+',user-scalable=no');head.appendChild(metaTag);

tips：和上面相似的適配，也可以利用css3 transform 的scale 值來實現(xiàn),只是需要在放大（旋轉）元素的基點位置上（transform-origin）做一下處理，下面用vw適配控制頁面大小的方法中有用到，原理很簡單；

4、vw、vh、vmin、vmax 主要用于頁面視口大小布局，相對于rem;v*在頁面布局上更加方便簡單

vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。

vw邏輯非常清晰，"1vw ＝ 1/100th viewport width"，用viewport width的百分比來設置element width。

vw被支持的太晚是其并不流行的根本原因，而當時移動端web app/page的開發(fā)需求已經(jīng)十分旺盛，彈性布局是一種不錯的移動端界面兼容展現(xiàn)方式，對于rem機遇就此而來，便成為一個實現(xiàn)彈性布局效果的極佳方案。

其實看目前狀況，對vw最不利的是Android Browser，ndroid Browser 4.4以下的用戶是不兼容的，目前新版x5更新后，安卓版微信的vw vh vmin vmax 已經(jīng)沒有兼容性問題了，那么隨著時間推移，相信未來vw將會流行。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

頁面是基于瀏覽器窗口大小自動適配的如果感覺頁面太大；可添加下面JS通過縮放控制頁面的最大尺寸

<script type="text/javascript">
    (function(doc,win){
        var htmlScale = function(){
            console.log('2');
            oBdoy = doc.getElementsByTagName('html')[0];
            var domWidht = doc.documentElement.clientWidth;
            var myScale = 750/domWidht;
            if(domWidht){
                oBdoy.style.transform = 'scale('+myScale+')';
                oBdoy.style.transformOrigin = '50% '+0+'%';
            }else{
                oBdoy.removeAttribute('style','transform');
                oBdoy.removeAttribute('style','transformOrigin');
            }
            
        };
        htmlScale();
        win.addEventListener('resize',htmlScale,false);
    })(document,window);
script>