移动端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