H5初体验~一个新手H5前端开发的笔记 | 您所在的位置:网站首页 › 移动端h5网站直播源码怎么用 › H5初体验~一个新手H5前端开发的笔记 |
在平凡的事物中,探寻人间的美好。 一、H5开发简介h5是HTML5 是升级版的HTML标准 1.优势(1)跨平台性!兼容性好,用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。 (2)开发和维护的成本较低,开发周期较短。 (3)本地存储特性。基于H5开发的轻应用比本地APP拥有更短的启动时间,更快的联网速度,而且无需下载占用存储空间,特别适合手机等移动媒体。 2. 缺点在性能上:同样的交互,用H5实现需要更多的系统资源,也可能会不够流畅。同时,应用还需要集成一个非常巨大的浏览器内核 3.使用场景(1)所有在线的应用类网站,本质上都是一个“H5”, 例如网易音乐app-->网页网易音乐(H5), 电脑PS软件-->网页在线PS(H5) (2)在线网页游戏 -- 4399小游戏 (3)用于微信营销的H5 -- 开屏广告页(每次点开各种应用前的酷炫广告) 4. 网页的构成(1)HTML文件 -- 页面的骨架、布局 (2)CSS文件 -- 渲染外观样式、色彩图片 (3)JS文件 -- 实现各种功能 阅读扩展:教你5分钟看懂H5是什么,及H5的应用场景举例 https://baijiahao.baidu.com/s?id=1615188459186221468&wfr=spider&for=pc 二、移动端页面适配移动端页面适配 类似于 PC端浏览器兼容适配 1. 为什莫要适配由于手机屏幕尺寸不一样,分辨率不一样,或者你需要考虑横竖屏的问题,这时候你也就不得不解决在不同手机上,不同情况下的展示效果了。 2. 页面适配需解决的问题(1)元素自适应问题(2)文字rem问题 (3)高清图问题(4)1像素问题 (5)横竖屏显示问题(6)手机字体缩放问题 这些问题之后会一一整理,先看下面链接学习 扩展阅读:页面适配(2) https://blog.csdn.net/gao531162436/article/details/81699313 移动端概念术语(1) https://blog.csdn.net/gao531162436/article/details/81625974 下面附 进行页面适配换算的写法:对于设计稿的px写成rem进行页面像素适配 window.onload = function () { /*750代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是 为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.1rem等等*/ }; $(document).ready(function () { getRem(750, 100) $('.top').load('./common/header.html'); }); window.onresize = function () { getRem(750, 100) }; function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth / pwidth * prem + "px"; }加入此script标签之后,在CSS样式中需要使用rem替代px(100px=1rem) |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |