卡塔尔世界杯排名_98世界杯决赛 - dylfjc.com

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标签之后，在CSS样式中需要使用rem替代px（100px=1rem）