移動端web開發

Media Query(媒體查詢):

@media 媒體類型 and (媒體特性) {
        /* css樣式 */      
}


媒體類型: screen, print...
媒體特性: max-width, max-height.

 

meta基礎知識

H5頁面窗口自動調整到設備寬度

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

方式一:

經過css判斷移動端口大小

        /* 當屏幕最大(或小於360px)就用下面的樣式 */

        /*
        @media screen and (max-width: 360px) and (min-width: 321px){
            html {
                font-size: 20px;
            }
        }

        @media screen and (max-width: 320px) {
            html {
                font-size: 24px;
            }
        }
        */

方式二:

經過js判斷端口

// 經過js獲取手機窗口寬度
        let htmlwidth = document.documentElement.clientWidth ||
                document.body.clientWidth;
        console.log(htmlwidth);

//    獲取視窗高度
        let htmlDom = document.getElementsByTagName('html')[0];

  // 設置文字
        htmlDom.style.fontSize = htmlwidth / 10 + 'px';

 

rem

rem 基準值計算

rem 數值計算與構建

rem 與scss結合使用

rem 適配實戰

1rem  = 16px  = (html的font-size)
170/16 = 170px

 

1rem = 16px

10 = 160px