前端面镜-布局方式

笔记-布局方式

.a.固定布局

以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸，如网页的主体部分宽度为960px，某个搜索框的宽度为60px，缺点就是不能根据用户的不同屏幕尺寸做出不同的表现；

b.可切换的固定布局

同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

c流式布局、百分比布局

0.左侧固定，右侧自适应，左右定宽，中间自适应

1.宽高使用百分比，加以max-和min-辅助，在屏幕尺寸差异不大的情况下使用，在当今的移动端开发上也是常用的布局方式，缺点是：宽度使用百分比，但是文字和高度使用px，会导致页面宽度被拉的很长，但是文字大小还是和原来一样；并且大小发生变化了，但是位置没有发生变化。

c.弹性布局

1.以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；

2.包裹文字的各元素的尺寸采用em或者rem做单位，而页面的主要划分区域的尺寸仍然使用百分数或者px，可以使包裹文字的元素随文字的缩放而缩放。

3.使用rem的话，通过媒体查询或者js，控制不同屏幕下的html的字体元大小。

d.混合布局

同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

E.响应式布局 = 自适应布局 + 流式布局   —针对web端 

1.需要对相同的内容进行不同宽度的样式设计，最主要的是需要找准一个临界点，然后通过对区域进行挤压、换行、增删增方式来实现。

F.自适应布局—移动端

1.分别为不同的屏幕分辨率定义布局，但是在同一分辨率下，页面的元素不会随着窗口大小的改变而该改变。其特点是在不同屏幕分辨率下，页面元素内容和布局不随窗大小的调整而发生太大的变化，宽度和图片保持自适应，内容不会被遮挡，不会出现滚动条，避免出现需要用手放大，拖拽的情况；

G.多种方式实现瀑布流布局

1.原理：先计算出一排能容纳几列元素，然后寻找搁列之中所有元素高度之和的最小者，并将新的元素添加到该列上，继续寻找所有列中高度之和的最小者。

使用@media来设置html的font-size的临界点大小的时候会有一种卡顿的感觉

而使用js的话，又要保证加载体验，需要头部内敛，为了保证实时性又要在多个浏览器上监听事件变化；

所以就有了两全其美的办法：vw，配合着calc计算来实现动态字体大小效果；

html{font-size:cal(18px + 4 * ( 100vw - 600px ) / 400 ) ; },当屏幕宽是600px的时候，100vw就是600px，1000px的时候，100vw就是1000px；

18px还可以换成112.5%

.page-wrap {

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

  display: -ms-flexbox;      /* TWEENER - IE 10 */

  display: -webkit-flex;     /* NEW - Chrome */

  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

 }