百分比布局android
1. 如何添加android百分比布局支持庫
相信大家都已經對Android
API所提供的布局方式非常熟悉了。也許在接觸Android的時候都有過這樣的想法，如果可以按照百分比的方式進行界面布局，這樣適配各種屏幕就簡單多了吧！谷歌正式提供百分比布局支持庫（android-support-percent-lib）。當然了android-percent-support這個庫，基本可以解決上述問題，下面我們將對這個支持庫進行介紹
這個庫提供了：
兩種布局供大家使用：
PercentRelativeLayout、PercentFrameLayout，通過名字就可以看出，這是繼承自FrameLayout和RelativeLayout兩個容器類；
支持的屬性有：
layout_widthPercent、layout_heightPercent、
layout_marginPercent、layout_marginLeftPercent、
layout_marginTopPercent、layout_marginRightPercent、
layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。
2. android百分比布局怎麼做
1.引入：compile 'com.android.support:percent:24.0.0'
2.點開源碼可以看到，主要有兩個布局類PercentFrameLayout和PercentRelativeLayout，一個工具類PercentLayoutHelper。
3.點開布局類比如PercentRelativeLayout的源碼，可以看到實現的很簡單。
3. Android進階——百分比布局及擴展
CSDN博客地址： http://blog.csdn.net/wo_ha/article/details/54138417
一、Android官方推出的百分比布局的使用
1、導入依賴
2、提供了如下的屬性
更多請參考： https://juliengenoud.github.io/android-percent-support-lib-sample/ （需要正確上網）
二、Android官方增強版百分比布局的使用——推薦使用
註：在官方的基礎上增加了布局PercentLinearLayout，支持百分比設置正方形，未改變官方原有的使用，支持設置字體的百分比，因此更推薦使用
1、導入依賴
2、支持的布局有
3、支持的屬性有
4、使用實例
效果圖
效果圖
效果圖
效果好像與直接使用xx%差不多，但是交換過來好像就不一樣了
效果圖
更多使用請參考：
https://github.com/hongyangAndroid/android-percent-support-extend
http://blog.csdn.net/lmj623565791/article/details/46767825
4. Android引入百分比布局
implementation 'androidx.percentlayout:percentlayout:1.0.0'
5. 最流行的四種移動端布局方式，看這一篇文章就夠了
眾所周知，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 的關鍵在於知道它定義了哪些樣式，以及這些樣式能實現什麼樣的效果