移動端單位介紹

來源:互聯網
上載者:User

標籤:維護   androi   tom   vmax   bottom   border   header   bsp   head   

 前言

在頁面整體布局中,頁面元素的尺寸大小(長度、寬度、內外邊距等)和頁面字型的大小也是重要的工作之一。一個合理設定,則會讓頁面看起來層次分明,重點鮮明,賞心悅目。反之,一個不友好的頁面尺寸和字型大小設定,則會增加頁面的複雜性,增加使用者對頁面理解的複雜性;甚至在當下訪問終端(iPhone、iPad、PC、Android…)層出不窮的今天,適應各式各樣的訪問終端,將成為手中的一塊“燙手的山芋”。所以在近幾年,“九宮格”式的“流式布局”再度迴歸。為了提供頁面配置,及其它的可維護性、可擴充性,我們嘗試將頁面元素的大小,以及字型大小都設定為相對值,不再是孤立的固定像素點。使其能在父元素的尺寸變化的同時,子項目也能隨之適應變化。以及結合少量最新CSS3的@media查詢,來實現“響應式布局”,bootstrap這類CSS架構大勢興起。

然而在CSS中,W3C文檔把尺寸單位劃為為兩類:相對長度單位絕對長度單位

 

然而相對長度單位按照不同的參考元素,又可以分為字型相對單位和視窗相對單位

字型相對單位有:em、ex、ch、rem;

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

絕對位置則是固定尺寸,它們採用的是物理度量單位:cm、mm、in、px、pt以及pc。但在實際應用中,我們使用最廣泛的則是em、rem、px以及百分比(%)來度量頁面元素的尺寸。

px: 絕對(固定)單位
缺點:任何情況下都是固定值,會導致布局在不同尺寸下的裝置錯位


%:相對定位(會有影響發生變化)相對於父級(自身)大小進行定位
缺點:能確定範圍的還是比較好計算的,對於不太好確定值得地方不好使用百分比,並且會導致變形,高度一般不好控制


em: 相對定位 (會有影響發生變化) em=當前字型大小
缺點:會根據當前容器字型大小發生變化,假如每個容器字型大小不一致,那麼計算會非常麻煩

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

可以認為它沒啥缺點吧!反正我個人還是挺喜歡的

 

 

 

動態修改根項目的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>

運行代碼看效果吧!!

移動端單位介紹

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.