標籤：維護 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>
運行代碼看效果吧！！
移動端單位介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
