移動適配

時間 2019-11-08

標籤移動適配欄目無線简体版

原文原文鏈接

移動適配

百分比適配

<!DOCTYPE html>
<html>
<head>
    <title>百分比適配</title>
    <style type="text/css">
        .container{
            width: 100%;
            height:100px;
            background: blue;
        }
        .item{
            width:50%;
            background: green;
            height:100px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

media query 適配

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>media query適配</title>
    <style type="text/css">
        .container{
            width: 100%;
            height:100px;
            background: blue;
        }
        
        @media screen and (max-width: 375px){
            .item{
                width:20%;
                background: green;
                height:100px;
            }
        }
        @media screen and (min-width:376px){
            .item{
                width:50%;
                background: red;
                height:100px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

rem 適配

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title> rem 適配 </title>
    <style type="text/css">
        /**
            一.rem 原理
                1 rem = 16px(16px 爲html的font-size) 
            
                計算對應的px爲多少rem(要算的px值除以1rem的px值)
                eg:
                    x rem = 180px ;
                    1 rem = 16px ;
                    => x = 180px/16px;
            
            二.根據屏幕寬度動態設置font-size，實現不一樣屏幕的大小的平滑縮放
                思路:
                    1.取某一個機型爲原型,根據設計稿將px轉換爲rem
                    2.根據不一樣的機型，設置不一樣的font-size
                    3.因爲font-size的改變,rem的大小也會改變從而實現了平滑過分的效果
                eg：
                    iphone 6: 375px * 667px
                    
                    (rem基準值)font-size = 375px /10 = 37.5 px  (即1rem 爲37.5px)

                    其餘的px的值 轉換爲rem :
                        其餘值的rem = 的px值/37.5;  
                    
                    注:
                        爲何除以10?
                        除以多少均可以,只是爲了使1rem的px 值使用起來符合通常規律
                        其餘的機型設置font-size都要除以同一個數值(10)
            
        */
        /*
            設計稿高度375px 算出rem
            375px/37.5px = 10 rem
        */
        .container{
            width: 100%;
            height:10rem;
            background: blue;
        }
        /*
            37.5px/37.5px = 1 rem
        */
        .item{
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">test</div>
    </div>
    <script type="text/javascript">
        //動態設置font-size
        let htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;
        let dom = document.getElementsByTagName("html")[0];
        dom.style.fontSize = htmlWidth/10 +'px';
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。