transform 3D效果/移动端开发基础

transform 3D效果:

    #box{
        width: 300px;
        height: 300px;
        background: #CCC;
        border: 1px solid #000;
        margin: 100px auto;
        transition: 1s all ease;
        transform: perspective(700px) rotateX(0deg);//设置景深与X轴的初始化
        transform-style: preserve-3d;//将此父类设置为3D效果
        transform-origin:left;//翻转时以左侧为轴心翻转。
    }
    #box:active{
        transform: perspective(700px) rotateX(90deg);//box被点击沿X轴转90度
    }
    #child{
        width: 300px;
        height: 300px;
        background: red;
        transition: 1s all ease;
        transform: translateZ(0px);
    }
    #child:active{
        transform: translateZ(100px);//漂浮的特效
    }
    // 需要使用transform: translateZ(100px);时,需将父元素设置transform-style: preserve-3d;此时父元素被规定为3D效果,子元素才可以脱离父元素
    //使用rotateX\Y\Z的时候一定要使用景深perspective,使用translateX\Y\Z的时候其父类一定要使用transform-style: preserve-3d;

移动端开发基础

移动端布局(适配部分)
1. viewport
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scaleable=no,'> 
    //device-width：设备最佳分辨率,
    //initial-scale：页面的初始缩放,少量手机会出现该属性失效的可能,需要使用maximum-scale=1.0,minimum-scale=1.0来代替该属性;
    //user-scalable：释放允许用户缩放
2. box-sizing
    box-sizing:border-box;//border算到盒子总大小
    box-sizing:content-box;//默认值
3.flex
4.rem