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

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

一、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）