媒体查询 + rem适配方案

作者: 9979eb0cd854 | 来源:发表于2018-09-17 20:49 被阅读115次

    流式布局适配方式:

    1、只达到宽度的适配
    2、内容没有自适应改变高度,高度也没有自适应改变

    rem适配方式:

    1、高度和宽度都自适应 内容可自适应 等比例缩放
    2、当我在改变rem的基准值html的字体大小的时候,页面上的容器在等比例缩放


    image.png image.png
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <title>rem适配</title>
            <style>
                body {
                    margin: 0;
                    padding: 0;
                }
                html {
                    font-size: 50px;/*把页面所有的px都变成rem*/
                }
                header {
                    width: 100%;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    font-size: 0.48rem;
                    color: #fff;
                    background-color: #f00;
                }
                /*
                 * 1、流式布局适配方式:
                 * 只达到宽度的适配
                 * 内容没有自适应改变高度,高度也没有自适应改变
                 * 
                 * 2、rem适配方式:
                 *   1、高度和宽度都自适应   内容可自适应  等比例缩放
                 *   2、当我在改变rem的基准值html的字体大小的时候,页面上的容器在等比例缩放
                 */
                
                /*
                 * 3、适配:
                 *   假设320px的设备   设置字体的大小是  50px
                 *   假设640px的设备   设置字体的大小是  100px
                 */
                /*4、使用媒体查询*/
                @media (min-width: 320px) {
                    html {
                        font-size: 50px;
                    }
                }
                /*5、需要适配移动端主流的设备     有很多    这里以iphone6   375px 为例*/ 
                /*但这个方法比较麻烦,要一个一个适配    用less可以解决这个问题*/
                @media (min-width: 375px) {
                    html {
                        font-size: 58.59375px;  /*     375/640*100=58.59375px  */
                    }
                }
                @media (min-width: 640px) {
                    html {
                        font-size: 100px;    /*   640/320*50=100px    */
                    }
                }
            </style>
        </head>
        <body>
            <header>购物车</header>
        </body>
    </html>
    
    
    image.png image.png

    相关文章

      网友评论

        本文标题:媒体查询 + rem适配方案

        本文链接:https://www.haomeiwen.com/subject/jwsdnftx.html