h5网页设计规范 第1篇
根据目前市场流行的手机移动终端，统计他们的设备独立像素。
值得大家好好细看的智能手机尺寸图表。
也只有iPhone6+采用了分辨率降频处理。
具体看下图：
有兴趣的小伙伴可以去尝试不同的尺寸，比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求，又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。
第一：背景图片必须采用background-size:cover;来实现。
第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。
通过对比可得：
除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。
iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。
由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。
那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。
那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。
在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640x1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。
h5网页设计规范 第2篇
移动应用中使用 WebView 进行 H5 开发时，需要遵守一些规范，以确保应用的性能、安全性和用户体验。以下是一些常见的规范：
性能优化：
安全性：
用户体验：
跨平台兼容性：
资源管理：
遵循这些规范可以帮助开发者开发出高性能、安全可靠、用户体验良好的移动应用 WebView H5 页面。
h5网页设计规范 第3篇
在实现页面一些页面效果时，我们应该先进行分析、拆解。
2. 渐变替代。很多背景图都是渐变构成的，那就不需要让设计师切成图片格式，而是利用css直接绘制。
总之，尽量使用 CSS 来实现画面效果有以下几个好处：
还有一点，使用 CSS 实现的动画、过渡和效果可以通过 GPU 加速，提高动画的流畅度，并减少 CPU 的负载。
h5网页设计规范 第4篇
1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），
二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。
5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。
h5网页设计规范 第5篇
使用合适的图片格式和大小，以减少网络请求和提高加载速度。
下面是一些具体的建议：
JPEG 格式 适用于照片、图像和渐变色的图形，如实景照片和人物照片。具有较高的压缩比率，文件大小也相对较小，适合保存色彩丰富的图像。缺点是不支持透明度，压缩过程中可能导致图像细节损失，不适合保存线条清晰的图形。
PNG 格式 适用于图标、线条清晰的图形或者LOGO等需要透明度的图像。支持透明度，无损压缩，保留图像细节。缺点是通常文件大小较大，不适合保存色彩丰富的照片。
WebP 格式 谷歌开发的一种新型图片格式，具有较高的压缩率和良好的图片质量，也支持透明度，适合用于网络传输和需要保持高质量的同时减少文件大小的图像。缺点是兼容性差，部分PC浏览器可能不支持，手机端反而支持度高一些。
base64 格式 base64 是一种将二进制数据编码为 ASCII 字符串的编码方式，常用于在 HTML、CSS 和 JavaScript 中嵌入图片数据。在移动应用开发或 Web 前端开发中，对于小文件可以转换成 base64 格式。base64 格式的图片数据适用于一些体积较小、不需要频繁更新或在页面加载时需要优化性能的图片，可以减少对外部图片资源的依赖，提高页面加载速度和性能。
之前合作过的设计师给出过如下建议：
使用图片压缩工具，如TinyPNG、JPEG Optimizer、gif5 compress 等，将图片压缩至合适的大小，以减少文件大小。
一般来说，移动端使用的图片几十K左右的范围，大几百K肯定不合适。
注意，避免无损压缩，因为在移动应用中，通常更关注文件大小而不是细微的图像细节。
将多个小图标或按钮合并成一个图片 Sprite，在页面加载时只需请求一次该图片，减少网络请求次数。使用 CSS Sprite 技术需要指定所需图片在的位置和大小，以便正确显示所需的图标。
雪碧图（Sprite Sheet）是一种将多个小图标、图片或动画帧合并到单个图像文件中的技术。雪碧图的原理是将多个图像按照一定的规则排列在一张图像上，然后通过 CSS 的 background-position 属性或者 JavaScript 来控制显示具体的图像区域。这样，在页面加载时只需请求一张合并后的大图，然后根据需要显示其中的某个部分，避免了多次请求小图标或图片导致的网络延迟和性能损耗。
在使用 CSS Sprite 技术时，需要注意：
适当调整图片尺寸指的是根据图片在页面上的显示大小和分辨率，对图片的实际尺寸进行调整，以达到优化页面加载速度和用户体验的目的。
具体来说，适当调整图片尺寸包括以下几个方面：
根据显示大小调整图片尺寸：
根据分辨率调整图片尺寸：
下面是一个例子：
当然，也可以用JavaScript来控制 src 属性来进行动态换图。
将页面上不立即需要加载的图片设为懒加载状态，在用户滚动到图片可见区域时再进行加载，以提高初始页面加载速度。使用 JavaScript 库，如等，来实现图片的懒加载功能。
使用 JavaScript 库来实现图片的懒加载功能是一种常见的方法，它可以延迟加载页面上不立即需要的图片，直到用户滚动到图片可见区域时再进行加载。下面是一个示例，使用 库实现图片的懒加载：
首先，引入 库文件：
然后，在需要进行懒加载的图片元素上添加 data-src 属性，并给图片元素添加一个特定的类名，例如 lazy：
最后，在 JavaScript 中初始化 LazyLoad 实例，并指定需要进行懒加载的图片元素的选择器（这里选择类名为 lazy 的图片）：
这样，页面上带有 lazy 类名的图片元素将会被延迟加载，直到它们进入用户视野范围内才会被加载，这底层运用了 IntersectionObserver，从而提高了页面的初始加载速度。更多关于 IntersectionObserver 检测页面内容渲染的内容可以阅读 HOW - IntersectionObserver 和页面元素曝光
另外可以根据实际需求和设计，在懒加载图片上添加一些过渡效果或加载指示，以提升用户体验。