H5开发笔记

时间 2019-12-05 标签 h5 开发笔记

这两天H5静态页面开发过程当中的问题总结。html

1.viewport - 移动开发必须的配置

//内容宽为设备宽度，初始化缩放倍数为1（不缩放）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.rem和px

(1)px是相对于显示器屏幕分辨率而言的相对长度单位。浏览器

(2)rem是相对根元素的font-size大小的相对单位，能够作到只修改根元素font-size大小就成比例地调整全部字体大小。布局

适配：字体

利用媒体查询设置断点来控制HTML的font-size

html {         
    font-size:16px;  
}  
@media (max-width:414px) 
{ 
    html {         
        font-size: 18px; 
    }  
} 
@media (max-width:375px) { 
    html { 
        font-size: 20px;
    }
}

根据屏幕大小动态设置html的font-size

var deviceWidth=document.documentElement.clientWidth;  
var rootFontSize = deviceWidth / 6.4; 
document.documentElement.style.fontSize=rootFontSize + 'px';

3.同行元素上下位移误差问题

手动设置元素居中，要否则浏览器会随机渲染，必须给它一个渲染规则。flex

4.元素设置display:inline-block,自动产生间距

解决:给父元素设置font-size:0； letter-spacing: -4px; 子元素再另外设置font-size和letter-spacing。spa

5.自适应布局

父元素设置display:flex ,子元素flex属性值设置比列。
利用百分百（%）布局

6.调试换分辨率设备自动重布局

//orientationchange：设备更换事件 
//onresize：接收reset事件时触发的EventHandler 
//DOMContentLoaded: 浏览器窗口大小发生变化事件

(function (doc, win) {     
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     
    recalc = function () {      
        var clientWidth=doc.documentElement.clientWidth;         
        if (!clientWidth) return;   
            //动态计算根元素的font-size
            doc.documentElement.style.fontSize=(clientWidth / 6.4) + 'px';     
        };      
        if (!doc.addEventListener) return; 
        
        //监听设备变化
        win.addEventListener(resizeEvt, recalc, false);  
        //监听浏览窗口变化
        doc.addEventListener('DOMContentLoaded', recalc, false);     
})(document, window);