H5开辟笔记

2023年1月9日 158次阅读 来源: 桃之夭夭

这两天H5静态页面开辟过程当中的题目总结。

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.偕行元素高低位移误差题目

手动设置元素居中，要不然阅读器会随机衬着，必需给它一个衬着划定规矩。

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

处置惩罚:给父元素设置font-size:0； letter-spacing: -4px; 子元素再别的设置font-size和letter-spacing。

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);

7.总结

H5页面的开辟，由于装备视口大小不一致，在适配上应当充足仔细、严谨。除了自适应的规划以外，更应当注重细节的处置惩罚。

    原文作者：桃之夭夭
    原文地址: https://segmentfault.com/a/1190000017088911
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞