产品设计中怎样考虑H5适配？移动端浏览器内核大多数是webkit内核，但是也有部分浏览器是其他类型内核，不同的浏览器内核对css样式的支持程度不一样，同一个css属性在不同浏览器的表现可能不同。今天小编就给你讲一下零基础学ui设计在h5适配的内容。

手机屏幕尺寸不同，分辨率不同，可能会导致布局错乱或字体、图片没有自适应。一般设计给予的设计稿只有一份，比如H5设计稿是以iphone7的尺寸（宽度375px）交付的，我们需要在不同屏幕尺寸下让整体布局保持一致。横竖屏适配问题，因为横屏宽度比较大，可以显示的内容更多；竖屏宽度比较小，显示的内容有限，它们的显示内容和样式按道理是需要做适配的。

一、不同机型下css属性兼容问题

这是页面H5设计适配要解决的最基本问题。因为不同机型，自带的浏览器内核可能不一样，对css属性的支持程度不同，可能同一个css属性，在iphone上面表现正常，在安卓机型上就没有正常展示，为了保证同一份ui在不同的机型表现一致，开发可通过换一种等价属性，或者采取优雅降级的方案去做兼容。如何知道要适配哪些机型？需要根据产品的目标用户使用的主流机型来定。主要考虑国家、年龄、性别。举个例子，如果你的目标用户主要是东南亚用户，需要适配的机型要考虑oppo、vivo、一加等。

二、页面元素自适应

页面元素自适应也可以叫响应式布局。响应式布局指的是页面元素的大小，包括字体大小、元素大小随着屏幕尺寸的变化而变化。
比如设计给的设计稿是宽度375px(高度一般不考虑)，在这个宽度上面图片的大小是宽12px/高12px，但是在宽度是780px的屏幕下，图片的宽度就按比例放大到宽24px/高24px。

三、iphonex刘海屏幕适配问题

众所周知，iphonex取消了物理按键，改成底部小黑条和顶部的齐刘海。这个改动会导致网页有屏幕适配问题。如果h5页面使用了吸底导航、返回顶部等固定定位的元素，就需要关注iphonex的适配问题了。推荐阅读>>>有哪些常见的版式设计排版？

产品设计中怎样考虑H5适配？以上提出的三种适配问题，css兼容适配和元素自适应是比较基础的适配，符合大多数的h5页面，H5设计只要根据目标用户，把需要兼容的机型给到开发就可以。横竖屏适配和暗黑模式适配要根据产品的具体定位和目标用户来定，横竖屏适配大多数适用于游戏、视频、多图片类的h5，暗黑模式适配大多数适用于阅读类的h5。

上一篇: 用户体验设计要素与产品价值

下一篇: 如何提升图形创意的新鲜感？