html移动端布局与页面自适应布局

常见的布局方式，这里指的是对于width和height在不同页面情况下的改变，
1.比如使用px，就是固定其高宽，不论页面怎样放大缩小，其占领的依旧是，使用px固定了的高宽。
2.又比如弹性布局，没有设置内容盒子的大小，其放大缩小所占的比列一样，但大小不一样
还有响应式布局，媒体布局等等，所以综上：
常见的页面布局方式有：
1.静态布局 即传统的固定px的布局
2.流式布局(Liquid layout)(栈栏系统) 主要划分区域的尺寸使用100%来表示
3.自适应布局（媒体查询布局） 即创建多个静态布局，每个静态布局对应一个屏幕分辨率
4.响应式布局 检测窗口大小利用bootstrap布局,
5.弹性布局（rem/em）

1.静态布局
PC端：固定了网页的宽高大小，不管在那个浏览器上，显示的都是开发人员在css中写的大小，当页面窗口变小时，遮住的部分，会通过滚动条的滚动显示出来。

移动端的静态布局：另外建立网站
在移动端开发中采用静态布局的两种方式：
1.在viewport meta标签上设置width = 320，页面的各个元素也采用px作为单位，通过js动态修改标签的initial-scale使得页面整体等缩放，从而刚好占满整个屏幕
2.在viewport meta标签上设置content“width=640，user-scalable=no”，页面的各个元素也采用px作为单位，由于640px超出了手机宽度，浏览器会自动缩小到页面全屏

2.流式布局
流式布局的特点，就是页面元素的宽度按照屏幕分辨率进行适度的调整，但整体布局不变，主要就是对页面的主要区域的尺寸使用百分数，使用百分比


也就是通过对宽度一百分的形式展现，这样在不同的屏幕分辨下就可以实现，就可以用过实现布局的大小改变。

3.自适应布局
自适应的特点是分别为不同的屏幕分辨率定义布局，及创建多个静态布局，每个静态布局都对应一个屏幕分辨率，也就在屏幕宽度不同的时候，为其展现对应的静态布局，这样页面的元素不随着窗口大小的改变，而是改变其所处的位置。
就是左列固定，右边自适应，或者左右固定中间自适应，使用float：left方法，计算没有固定的宽高时，使用calc（）计算

4.响应式布局（也叫媒体查询布局）
通过媒体查询为不同的，为不同的屏幕分辨率设置一套单独的样式，即元素的大小和样式都会变，，与自适应相同自己查阅大小，然后根据其调整屏幕样式。

5.弹性布局
1.rem和em的区别：em是相对其父元素，rem始终相对于html大小，即页面根元素。
使用em或rem单位进行相对布局，相对百分比会更加灵活，同时可以支持浏览器字体大小调整和缩放等正常显示，因为em是相对