手机html设计规范,手机网页设计尺寸规范具体是多少?

一般情况下，以现有市场上流行的移动智能手机，单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136，在高度为812处设置一条安全线(参考线)，将重要的内容布局在这条安全线之上。

手机端H5页面的设计稿尺寸大小规范内容如下：

1、像素是没有宽高的(不要被Photoshop中的像素格欺骗)，它只代表一个采样的色值。

2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。

3、平时制作手机页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实)，

二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。

5、一般情况下，手机页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上(网上有些文章说安全线是960px处，个人认为不太准确)。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。

手机html设计规范,手机网页设计尺寸规范具体是多少?相关推荐

ios底部栏设计规范_iPhone6界面设计尺寸规范大全【含原型设计规范】
目前,很多APP设计师的APP Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸.这一节课也算是25学堂为大家精心整理的iPho ...
html pc端一般宽度多少钱,pc网页设计尺寸_pc端网页设计尺寸规范
一.如果织梦网站手机端是动态地址,按照下面的代码来做即可织梦PC端首页跳转到手机站首页代码(需要加到pc站头部中): metahttp-equiv=mobile-agentcontent=forma ...
web的标准网页设计与php课后,web网页设计尺寸规范
网页设计的尺寸主要和两个因素有关,一个是电脑显示器的分辨率,还有浏览器的分辨率. 800×600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定. 1024×768下,网页宽 ...
web网页、手机app设计规范
网页设计规范新建ps文件时,宽度为1920.单位为像素.颜色模式为rgb.高度自定义: 一.网页设计尺寸制作网页时我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px.但并不 ...
ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...
[ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...
ios底部栏设计规范_IOS界面设计尺寸标准规范
很多IOS APP UI设计稿都是以iphone6为基准的,方便向上适配iphone7的尺寸,也方便向下适配iphone5的尺寸.所以小编给大家分享iPhone6的界面设计尺寸有哪些规范. IOS界面 ...
android和苹果微信大小,如何禁止安卓Android或苹果IOS手机在微信中网页放大？
做H5项目,在手机微信端打开网页,由于一些手机的字号设置的很大,所以网页也会随之放大,这样就影响了网页整体美观.那么,怎样才能阻止手机微信里的网页放大呢? 下面是安卓Android和苹果IOS的处理代 ...
Python selenium —— 用chrome的Mobile emulation模拟手机浏览器测试手机网页
很多人发现chrome有项功能,就是在开发者工具里能够模拟手机打开网页,便想能否用selenium对此进行自动化测试.答案当然是yes! 今天博主便给大家分享下如何用chrome的MobileEmul ...
在电脑上打开手机当前浏览的网页
ShareUrl(项目名) 实现的功能:在电脑上打开手机当前浏览的网页在手机浏览器中分享当前打开网页的url到ShareUrl中把url上传到gitee的代码片段中 chrome插件检测到url后 ...
HTML5期末大作业：动漫网站设计——html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作 ...

手机html设计规范,手机网页设计尺寸规范具体是多少?

手机html设计规范,手机网页设计尺寸规范具体是多少?相关推荐

最新文章

热门文章