H5开发笔记

helloworldcoding 发布于2019-08-26 13:24 / 864人阅读

摘要：移动开发必须的配置内容宽为设备宽度，初始化缩放倍数为不缩放和是相对于显示器屏幕分辨率而言的相对长度单位。

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

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

//内容宽为设备宽度，初始化缩放倍数为1（不缩放）

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页面的开发，因为设备视口大小不一致，在适配上应该足够细致、严谨。除了自适应的布局之外，更应该注意细节的处理。

服务器托管私有云 java开发入门笔记 h5 webrtc 开发 h5开发android应用 h5前端开发工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108774.html

前端复习笔记--1.html标签复习速查

摘要：可读性，提高代码的可读性，便于多人的修改维护，提高开发效率。主流浏览器都兼容的新标签，对于及以下版本不认识的新元素，可以使用创建一个没用的元素来解决，例如，也可以使用来解决兼容性问题，详情可参考概览 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文档章节导航表示和主要内容不相关的区域表示一个独...

番茄西红柿 2019-08-01 18:42 评论0 收藏0
基本方法笔记 - 收藏集 - 掘金

摘要：探讨判断横竖屏的最佳实现前端掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优...

maochunguang 2019-08-20 17:44 评论0 收藏0
实用的IT类网站及工具大集合

摘要：整理的一些实用的类网站及工具。链接云适配有时候我们做出的网站没有用到响应式布局，也可能我们的网站的像素宽度已经规定成具体的多少像素了。同时提供多个开放，功能实用，非常强大。整理的一些实用的IT类网站及工具。 1.聚合数据大家在开发过程中，可能会用到各种各样的数据，想找一些接口来提供一些数据。比如天气预报查询，火车时刻表查询，彩票查询，身份证查询等等。有了这个接口，直接调用即可。各种...

rollback 2019-05-29 17:49 评论0 收藏0