弹性布局与移动web

布局的方式有那些：

1.伸缩布局   flex

2.流式布局  百分比  非固定像素，内容向两侧填充

3.响应布局  媒体查询 （超小屏设备的时候：流式布局）

  共同点：元素只能做宽度的适配（排除图片）

 适配方案rem：宽度和高度都能做到适配（等比缩放）

4.rem布局

通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸

4.1 把页面上px单位转换成rem单位

4.2 页面制作的时候 psd 上的量取的px转成rem使用

4.3 怎么换算？？？预设一个基准值 方便计算100px

4.4 适配的时候设置基准值  320px  50px怎么算：（640px 100px

===320px 50px）

4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度

4.6 怎么去改变 （js换算，媒体查询推荐）

flex：1 平均分布

首先是用有 display: flex;父级    然后是每个元素flex:1

flex-direction属性决定主轴的方向（即项目的排列方向）

flex-direction:row | row-reverse | column |column-reverse;

动画速度：

    1.ease 先快后慢 最后非常慢

    2.linear 匀速

    3.ease-in 速度越来越快

    4.ease-out 速度越来越慢

    5.ease-in-out 速度先快后慢 

以上五种动画速度是比较特殊，其实他们都是由 贝塞尔曲线 来的

视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。

设置视口的标签

防止内容溢出，不出现滚动条，提供用户体验

 box-sizing:border-box;

两栏布局小技巧

.左侧{

     foat:left;

    width: 100px;

    height: 100px;

    background: pink;

   }

.右侧{

       /*让这个元素绝对绝缘  bfc*/

     /*不让其他浮动元素影响自己*/

     /*不让自己的浮动去影响别的元素*/

     overflow: hidden;

     }

   

   

   

   title

   

   

   

"

   

   

   

   title

   

   

   

"

   

   

   

   title

   

   

   

"

   

   

   

   title

   

   

   

"

   

   

   

   title

   

   

   

"

   

                     

   

   title

   

   

   

0.bai��p�h!

   

                     

   

   title

   

   

   

0.bai��p�h!

   

                     

   

   title

   

   

   

0.bai��p�h!