百分比布局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 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果