android的流式布局

『壹』 最流行的四種移動端布局方式，看這一篇文章就夠了

眾所周知，pc端呢目前處於一種三家分晉，即三種內核（webkit，blink，gecko），當然算上馬上要更換內核的IE那就是四個。而我們的移動端呢，那就是萬余基於webkit了，所以各位進行移動端web開發時，只考慮webkit的適配就可以了，怎麼樣，開不開心 ？

我們先來看看什麼是視口，視口就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分為布局視口、視覺視口和理想視口，他又可以分成一下四種

一般移動設備的瀏覽器都默認設置了一個布局視口，用於解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口解析度設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。

字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。

我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

理想視口，對設備來講，是最理想的視口尺寸

需要手動添寫meta視口標簽通知瀏覽器操作

meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬

最標準的viewport設置

視口寬度和設備保持一致

視口的默認縮放比例1.0

不允許用戶自行縮放

最大允許的縮放比例1.0

最小允許的縮放比例1.0

ps：注意二倍圖或者三倍圖問題

流式布局，就是百分比布局，也稱非固定像素布局。

通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

流式布局方式是移動web開發使用的比較常見的布局方式。

父盒子開啟display：flex後，默認為不換行，所以使用flex-wrap：wrap；使其換行

使用justify-content: space-around; 使其子盒子主軸間距平均分配

使用align-content: space-around; 使其子盒子側軸間距平均分配

方案1

①假設設計稿是750px

②假設我們把整個屏幕劃分為15等份（劃分標准不一可以是20份也可以是10等份）

③每一份作為html字體大小，這里就是50px

④那麼在320px設備的時候，字體大小為320/15就是  21.33px

⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的

⑥比如我們以750為標准設計稿

⑦一個100 100像素的頁面元素在  750屏幕下，  就是 100/ 50  轉換為rem  是  2rem 2rem  比例是1比1

⑧320屏幕下，  html字體大小為21.33  則 2rem=  42.66px  此時寬和高都是 42.66  但是寬和高的比例還是 1比1

⑨但是已經能實現不同屏幕下  頁面元素盒子等比例縮放的效果

總結：

①最後的公式：頁面元素的rem值 =  頁面元素值（px） /  （屏幕寬度  /  劃分的份數）

②屏幕寬度/劃分的份數就是 htmlfont-size 的大小

③或者：頁面元素的rem值 =  頁面元素值（px） /  html font-size 字體大小

方案2

1.less+rem+媒體查詢

2.lflexible.js+rem

響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。

原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。

父容器版心的尺寸劃分

超小屏幕（手機，小於 768px）：設置寬度為 100%

小屏幕（平板，大於等於 768px）：設置寬度為 750px

中等屏幕（桌面顯示器，大於等於 992px）：寬度設置為 970px

大屏幕（大桌面顯示器，大於等於 1200px）：寬度設置為 1170px

但是我們也可以根據實際情況自己定義劃分

直接拿Bootstrap 預先定義好的樣式來使用

修改Bootstrap 原來的樣式，注意權重問題

學好Bootstrap 的關鍵在於知道它定義了哪些樣式，以及這些樣式能實現什麼樣的效果

『貳』 計算器按鍵界面適用什麼布局模式

布局管理器可以用panel、JPanel、或者流式布局。

這里的布局管理器貌似Jpanel，還是panel，不記得了，不好意思，代碼提供不了你，畢竟好多都不記得，都被android的替代了。

這方面的東西我已經很久沒有用了，什麼布局管理器很多都已經不記得了，但是這個思路肯定是沒有問題的，我以就前做過這個。

計算器科普

現代的電子計算器能進行數學運算的手持電子機器，擁有集成電路晶元，但結構比電腦簡單得多，可以說是第一代的電子計算機（電腦），且功能也較弱，但較為方便與廉價，可廣泛運用於商業交易中，是必備的辦公用品之一。

除顯示計算結果外，還常有溢出指示、錯誤指示等。計算器電源採用交流轉換器或電池，電池可用交流轉換器或太陽能轉換器再充電。為節省電能，計算器都採用CMOS工藝製作的大規模集成電路。

計算器一般由運算器、控制器、存儲器、鍵盤、顯示器、電源和一些可選外圍設備及電子配件，通過人工或機器設備組成。低檔計算器的運算器、控制器由數字邏輯電路實現簡單的串列運算，其隨機存儲器只有一、二個單元，供累加存儲用。

高檔計算器由微處理器和只讀存儲器實現各種復雜的運算程序，有較多的隨機存儲單元以存放輸入程序和數據。鍵盤是計算器的輸入部件，一般採用接觸式或感測式。為減小計算器的尺寸，一鍵常常有多種功能。顯示器是計算器的輸出部件，有發光二極體顯示器或液晶顯示器等。

集成電路（見互補金屬-氧化物-半導體集成電路），並在內部裝有定時不操作自動斷電電路。計算器可選用的外圍設備有微型列印機、盒式磁帶機和磁卡機等。