在平凡的事物中，探寻人间的美好。

一、H5开发简介

h5是HTML5 是升级版的HTML标准

1.优势

（1）跨平台性！兼容性好，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。

（2）开发和维护的成本较低，开发周期较短。

（3）本地存储特性。基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。

2. 缺点

在性能上：同样的交互，用H5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核

3.使用场景

（1）所有在线的应用类网站，本质上都是一个“H5”，

例如网易音乐app-->网页网易音乐（H５）, 电脑PS软件-->网页在线PS（Ｈ５）

（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进行页面像素适配

<script type='text/javascript'>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>

加入此script标签之后，在CSS样式中需要使用rem替代px（100px=1rem）

H5初体验~一个新手H5前端开发的笔记相关推荐

做为初入职的Web前端开发，应该如何尽快提高自己的能力？
[做为初入职的Web前端开发,应该如何尽快提高自己的能力?] 说前端要懂后端的纯粹是扯淡+2货. PS:实在受不了一群蠢货了. 什么叫懂后端? 马丹你们先弄清楚什么叫懂后端好了. 不写过三年五年的后端 ...
ue编辑器c语言语法高亮文件,再见UE之VS Code初体验---实现远端Linux C开发配置，ue初体验...
再见UE之VS Code初体验---实现远端Linux C开发配置,ue初体验一.引言笔者以前使用的远端开发工具为 Xshell5 + Xftp5 + Source Insight4++Uedit ...
前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
前端开发学习笔记（一）：HTML
前端开发学习笔记(一):HTML 文章目录前端开发学习笔记(一):HTML 一. HTML的文档结构二.标签属性 2.1. 标签属性 2.2. 文字格式化标签 2.3. html实体转义三. t ...
我的Go+语言初体验——iPad上搭建Go+开发环境（ish版）
目录欢迎来到用iPad来学习Go+之旅一.在 iPad 安装 Go+ 前的准备 1. iSH Shell 的作用 2. 安装 iSH Shell 3. 在 iSH 里安装一些常用软件 apk 命令 ...
imgcook（图像大厨）初体验，图片转前端代码。前端把自己搞失业了！
imgcook是什么?简单的说,就是可以把设计稿和图片转成前端代码.你或许会说,这个很多年前就有了啊,而且很不好用.但是!这个是由阿里巴巴推出的,所以规范程度应该会很高. 如果永久免费的话,我相信初中 ...
一个新手对软件开发的理解（写自第一个项目--Linpop之后）
在沈阳东软(不是广告)呆了一个月的时候,c和Linux讲完了,如果说没有太扎实的基础的话,来东软培训还真是比较吃力.今年比较幸运貌似,碰上了开发经验丰富的老师.收获很多,也很大其实.看到第一篇整理贴居 ...
HTML+CSS前端开发学习笔记
HTML+CSS 学习路线: 1.HTML 1.1基础概念 web标准: 基本结构标签: html骨架: <!DOCTYPE>标签:文档类型的声明标签 <!DOCTYPE html& ...
前端开发学习笔记（一）深入浅出Javascript
从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈.从今天开始静下心来,全面深入的学习WEB开发的有关知识.将学习的体会和要点记录下来,以作备忘. 深入 ...

H5初体验~一个新手H5前端开发的笔记