移动端布局与多终端浏览器兼容概念

移动端布局

1、百分比（弹性）布局的原理及应用

弹性布局（100%）布局的特点
顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变；
中间每条招聘信息不管分辨率怎么变，招聘公司的图标信息都位于
条目的左边，薪资都位于右边

2、rem（等比缩放）布局的原理及应用

在详细介绍rem之前，我们先来一起回顾一下我们常用的两种计量单位，
也是备受争论的两个：
px为单位
在Web页面初期制作中，我们都是使用px来设置我们的文本，因为他比较稳定和
精确，但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，
他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。
这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，
这时就提出了使用em来定义Web页面的字体。

em为单位
前面也说了，使用时 px 为单位是比较方便，而又一致，但在浏览器中
放大或缩放浏览器页面时会存在一个问题，要解决这个问题，我们可以使用
em 单位。

rem是什么？
rem（font size of the root element）是指相对与根元素的字体大小
的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，
em（font size of the element）是指相对于父元素的字体大小的单位。
他们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算

为什么web app 要使用rem？
rem能等比例适配所有屏幕
rem是用过根元素进行适配的，网页中的根元素指的是html我们用过
设置html的字体大小就可以控制rem的大小。

多终端浏览器兼容

1、浏览器兼容–在我们的实际开发中会涉及到在多个浏览器比如firefox，opera，
chrome，或者ie的多个版本下进行调试，在不同版本浏览器下就会出现显示效果
不一的情况。
2、宽高自适应–在我们的实际开发中会遇到不限定容器的宽和高的情况，
甚至希望部分容器而言随着父元素或者浏览器的缩放而缩放。

意义：
1、掌握了多终端浏览器兼容才能保证我们的项目在各个浏览器下保持一致的可读性
2、掌握多终端浏览器兼容在网页布局中非常重要，它能够使网页显示更灵活，
可以适应在不同设备、不同窗口和不同分辨率下显示。
3.掌握多终端浏览器兼容是一个合格的前端必须要达到的条件，在将来踏入社会
也是自身专业性的一种体现。