- 19327
-
-
-
-
-
最近很多小伙伴都在问一些关于微信上的UI界面设计的问题，比如设计尺寸、图标、如何兼容等等。还有一些微信单图文和多图文的图片设计尺寸问题。
今天，25学堂在此一一跟大家说一下。有兴趣的小伙伴可以阅读一下：
首先iPhone6在微信上的设计尺寸大小与实际展示大小
导航栏+iphone状态栏高度： 64px = 导航栏44+状态栏20
iphone4
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
iphone 5 / 5c / 5s /se
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
iphone6 / iphone 7
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
iphone6 plus / iphone 7 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
当我们在设计微信H5页面的尺寸当中，有2种选择的尺寸：
第一种是：750 * 1206（1334px-128px）
第二种是：我们一般是按照“宽1080 * 高1698（1920-132-40）的尺寸进行页面设计，宽1080是考虑到做到主流大屏手机的尺寸然后向下兼容。高度方面还要考虑减去手机系统标题栏，以及微信app标题栏的高度。
当我们h5前端在做兼容性处理的时候，只需要理解上面的这些尺寸，即可快速写出兼容性代码：
iPhone4/iPhone4s 的屏幕显示尺寸为320*480，
iPhone5/iPhone5c/iPhone5s的屏幕显示尺寸为320*568，
iPhone6 / iphone 7的屏幕尺寸为375*667，
iPhone6 plus / iphone 7 plus 的屏幕显示尺寸为414*736，用css做iPhone的尺寸兼容就好做了。代码如下：
@media all and (min-width:320px) {
}/*ip 6*/@media all and (min-width:375px){ }/*ip 6+*/@media all and (min-width:414px){ }
第二个部分是关于微信图文消息推送当中的图片尺寸问题：
微信图文消息体验过程中有三类图片：
1. 公众号对话框中的图文消息"封面图片”（分一级、二级两种）
2. 图文消息页面的“正文图片”
3. 在对话框或朋友圈中的“缩略图”
它们的尺寸：
1、封面图片
微信有推荐尺寸：一级宽900*高500像素，二级200*200
如果宽900的要求不能达到，尽量保持宽高比，因为这会影响到3的效果
2、正文图片
一级图文消息的封面可以显示在正文中，也即微信认为宽度为900的图片显示质量就不错
所以宽度不要超过900太多至于加载慢，也不要小于太多至于图模糊了
3.、缩略图
二级图文消息的封面（200*200）会直接作为分享的缩略图
一级图文消息的缩略图是从封面900*500的正中央截取500*500的区域后缩放得到，想要缩略图显示效果好，需要将重要的内容放在封面图片的中央部位
全站高品质素材免费下载！
