02-移動端單位介紹

時間 2019-11-21

標籤移動單位介紹欄目無線简体版

原文原文鏈接

前言

在頁面總體佈局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的工做之一。一個合理設置，則會讓頁面看起來井井有條，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字體大小設置，則會增長頁面的複雜性，增長用戶對頁面理解的複雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成爲手中的一塊「燙手的山芋」。因此在近幾年，「九宮格」式的「流式佈局」再度迴歸。爲了提供頁面佈局，及其它的可維護性、可擴展性，咱們嘗試將頁面元素的大小，以及字體大小都設置爲相對值，再也不是孤立的固定像素點。使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化。以及結合少許最新CSS3的@media查詢，來實現「響應式佈局」，bootstrap這類CSS框架大勢興起。css

然而在CSS中，W3C文檔把尺寸單位劃爲爲兩類：相對長度單位和絕對長度單位html

然而相對長度單位按照不一樣的參考元素，又能夠分爲字體相對單位和視窗相對單位bootstrap

字體相對單位有：em、ex、ch、rem；框架

視窗相對單位則包含：vw、vh、vmin、vmax幾種iphone

絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。佈局

px: 絕對（固定）單位
缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位字體

%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制ui

em: 相對定位（會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩spa

rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小scala

能夠認爲它沒啥缺點吧！反正我我的仍是挺喜歡的

動態的修改根元素的font-size：

須要經過js去控制：

/*得到頁面寬度後動態修改html上的fontsize
* 320爲iphone5設計稿下的頁面寬度，以下設置後頁面的頁面在iphone5等寬屏幕上html
* 的font-size會變爲20px，即 1rem = 100px    1px=0.05rem
* 因此設置元素尺寸的時候，若是測量設計稿 15px  則需設置尺寸爲 (0.05*15)rem = 0.75rem   
*/


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

將上面的文件引入到當前項目中，

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端佈局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                /*font-size: 30px;*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size: 1.5rem;
            }
            
            .list .item{
                float: left;
                width: 7rem;
                height: 7rem;
                border: 1px solid black;
                margin: 0.25rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>

運行代碼看效果吧！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。