年初随笔

Posted 2020-08-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了年初随笔相关的知识，希望对你有一定的参考价值。

2017年也已经开始了快一个月的时间了，然而我却好像没有跨进新一年的感觉

过去的一年里，前端开发这个行业的变化给我的感觉实在是快得有点眼花缭乱应接不暇

各种工程化工具，各种新框架占据了这个行业里人们日常讨论的话题

然而反思回自己的团队，仍然是停留在比较基础的开发流程。不得不让我恍然醒悟，自己真是半年的经验凑合用了两年。

所以选择在这样一个时间，记录下自己的这半年经验，做为一个分隔线，让自己突破现在的状态。

移动开发篇：

最先接触的移动端自适应的做法，大概是手淘家的flexible.js

具体做法就是通过控制html根元素的font-size值搭配rem单位来实现的适应。有个值得注意的地方是flexible还通过动态生成meta标签来改变viewport缩放，实现对iphone系列的高度自适应（语文不好真不知道怎么形容），达到一个在Retina屏幕下页面显示质量也不会受太大影响

后来刷论坛的时候，接触到了一些其他大神的做法，比如我现在也在使用的通过calc属性来改变html的font-size值来实现的适应,搭配媒体查询来实现一些低版本浏览器的兼容，毕竟布局本来就是html和css的职责，能不用js来实现就尽量不用

flex布局：

flex在移动端上确实非常好用，基本可以代替float和定位，垂直居中也比以往的display-table来的方便。

唯一要注意的就是flex有一个早期版本的兼容写法

现在的语法：

/*父容器*/
    .box{                                        
        display:-webkit-flex;
        
        display:flex;
        
        /*行内元素也可也用flex*/
        display: inline-flex;
    }
    /*父容器样式*/
    .box{
        /*主轴方向*/
        flex-direction:row; /*row：从左到右   column：从上到下*/
        
        /*主轴对齐*/
        justify-content:center;/*flex-start：左对齐  flex-end：右对齐   space-between：两端对齐*/
        
        /*交叉轴对齐*/
        align-items:center;/*flex-start：顶部对齐  flex-end：底部对齐*/
    }
    /*子元素*/
    .item{
        /*排序*/
        order:0; /*数值越小排越前*/
        
        /*元素放大比例，0表示不放大*/
        flex-grow:0;
        
        /*元素缩小比例,0表示不缩小*/
        flex-shrink:1; 
        
        /*固定大小*/
        flex-basis: 1;
    
           /*综合上面三种的简写,默认值0 1 auto*/
        flex:xx;
    }

View Code

旧版本兼容语法：（发现有兼容问题可以尝试加上此兼容写法）

/*父容器*/
    .box{                                        
        display:-webkit-box;
        display:box;
    }
    /*父容器样式*/
    .box{
        /*排列方式*/
        box-orient:horizontal; /*horizontal：水平方向   vertical：垂直*/
        
        /*方向*/
        box-direction:normal; /*normal：默认方向   reverse：反方向*/
        
        /*主轴对齐*/
        box-pack:center;/*start：左对齐  end：右对齐   justify：两端对齐*/
        
        /*交叉轴对齐*/
        box-align:center;/*start：顶部对齐  end：底部对齐*/
    }
    /*子元素*/
    .item{
        /*排序*/
        box-ordinal-group:0; /*数值越小排越前*/

        box-flex:xx;
    }