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工艺制作的大规模集成电路。

计算器一般由运算器、控制器、存储器、键盘、显示器、电源和一些可选外围设备及电子配件，通过人工或机器设备组成。低档计算器的运算器、控制器由数字逻辑电路实现简单的串行运算，其随机存储器只有一、二个单元，供累加存储用。

高档计算器由微处理器和只读存储器实现各种复杂的运算程序，有较多的随机存储单元以存放输入程序和数据。键盘是计算器的输入部件，一般采用接触式或传感式。为减小计算器的尺寸，一键常常有多种功能。显示器是计算器的输出部件，有发光二极管显示器或液晶显示器等。

集成电路（见互补金属-氧化物-半导体集成电路），并在内部装有定时不操作自动断电电路。计算器可选用的外围设备有微型打印机、盒式磁带机和磁卡机等。