对2048项目的改进1——自适应布局（移动端适配）

一、对于一些均分的排列使用flex布局（若要在移动端看着好看，可以专门为移动端开发页面）
flex布局本来就是自适应的，自适应部分随着屏幕尺寸的差异也会自动展示更多或者更少的内容。

//2048的flex布局（待补充）

缺点：
a. 不能100%按设计稿还原
b.可能会在 428px 的屏幕上看起来 OK，但在 320px 的屏幕上某个按钮被挤了下去。开发工程师和测试工程师需要在尽可能多的真实设备上确认效果，对展示有问题的地方用媒体查询做微调。但这样间接增加了工作量。
c. flex 自适应布局对绝大多数页面能合理展示，但对于一些非均分排列和两栏布局的设计风格就无能为力了。比如一个活动页面上有一个抽奖转盘。如果小屏和大屏都用同样大小展示，视觉上会很奇怪。
所以，开发工程师、设计师、测试工程师更偏好另外一种思路：等比缩放。
二、等比例缩放
要求页面随着移动端大小改变
(1)在head标签中加入meta标签设置viewport缩放

<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑（物理）像素宽度/设计稿宽度}" >
例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//个人在编写过程中测试过使用0.5可行（对于我当前的参数）

设置页面布局视口 (layout viewport) 的宽度为{设计稿宽度}（此时页面一般会超出屏幕），再缩放页面（initial-scale）使其恰好撑满屏幕。其中，可以通过js计算获取屏幕宽度。
缺陷：a. 会整体缩放
b. 对于设置的固定尺寸，由于不同设备视口和像素比不同，导致固定像素的网页在不同设备上的显示不同，有可能会缺少有可能会溢出，因此在移动端开发时就不能在使用px来进行布局了。如设置的是450px，对于屏幕小于450px的屏幕就会溢出（不能显示完全）。

（2）可以使用vw来自适应布局，vw适配（使用vw+rem）
前备知识：100vw就等于一个视口的大小,1rem = 1 html字体的大小
根据屏幕像素和vw进行换算来设置html的字体大小，之后布局时使用rem代替px进行布局即可。
例如：

html{
    //使用vw进行移动端适配，假设以375px的屏幕为例，100vw = 750px
    font-size: 5.333333333333333333vw;//则=40px
    // font-size: 40px;
    //使用vw可以使页面随移动端视口大小的改变等比例改变
    //不同设备大小下vw不同，故font-size也不同
}
body{
    background-color: #faf8ef;
    .wrapper{
        width: 11.25rem;//450px
        //缩到450就不能再继续小了
        margin: 3rem auto;//100px
        position: relative;
        #score{
            width: 2.5rem;
            height: 1rem;
            line-height: .5rem;
            text-align: center;
            background-color: #bbada0;
            border: solid .05rem #bbada0;
            border-radius: .05rem;
            color:#f9f8e9;
            font-size: .4rem;
            font-weight:bold;
            position: absolute;
            left: 0;
            top:-1.75rem;
            span{
                color: white;
                font-size: .5rem;
            }
        }
        .newGame{
            width: 2.75rem; 
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            text-decoration: none;
            background-color: #8F7A66;
            border: solid .05rem #8F7A66;
            border-radius: .05rem;
            color:#f9f8e9;
            font-size: .4rem;
            font-weight:bold;
            position: absolute;
            left: 8.5rem;
            top:-1.75rem;
        }
        .bottomBox{
            width: 11rem;
            height: 11rem;
            
            background-color: #BBADA0;
            border: solid 0.125rem #BBADA0;
            border-radius: 0.125rem;
            .box{
                width: 2.5rem;
                height: 2.5rem;
                background-color: #cdc1b4;
                margin: 0.125rem;
                border-radius: 0.05rem;
                float:left;
                span{
                    // span是内联元素，不设置display:block即使设置宽高也不能显示设置的宽高，只会根据其中内容来宽高
                    // display:none;
                    height: 2.5rem;
                    line-height: 2.5rem;
                    text-align: center;
                    font-size: 1.25rem;
                    font-weight:bold;
                    color: #776e65;
                }
                
            }
           
        }
    }
    .gameOver{
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 18.875rem;
        background-color: rgb(202, 202, 230);
        font-size: 1.25rem;
        text-align: center;
        text-decoration: none;
        opacity:0.7;
        color: black;
        a{
            display: inline-block;
            margin: 0 2.5rem;
            opacity:1;
            color: green;
            font-size: 1.25rem;
            // justify-content: center;
            // width: 70px;
            // height: 70px;
            // background-color: antiquewhite;
        }
    }
}
@keyframes size0to1{
    //CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
    from{
        transform: scale(0);
    }
    to{
        transform: scale(1);
    }
}
@keyframes sizeMergeTo1{
    from{
        transform: scale(1.3);
    }
    to{
        transform: scale(1);
    }
}

注意：a.
font-size值小于12px时（不包括0），浏览器会把它默认设置为12px，故使用vw+rem布局时，将font-size设置为大于12px的值才会生效。
b. 基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用 vw 或rem作为单位。不需要缩放的元素使用 px 做单位。
缺点：如果font-size设置的是一个不容易换算的值，布局时会比较麻烦。