最全手机端网页设计尺寸大小

 Html/Css   高蒙   阅读(3332)   评论(0)   2015-12-03 15:13:59    手机端网页 手机端尺寸 


最全手机端网页设计尺寸大小

 
对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络):
 
安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px
 
1.png
 
在Window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。
在Window 7常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。
 
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。
 
iPhone手机网页的设计尺寸
 
iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI
 
2.jpg
 
安卓网页的设计尺寸
 
320dp:一个普通的手机屏幕(240X320,320×480,480X800)
480dp:一个中间平板电脑像(480×800)
600dp:7寸平板电脑(600×1024)
720dp:10寸平板电脑(720×1280,800×1280)
 
ipad网页的设计尺寸
 
iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI
 
3.jpg
 

补充:

响应式常用的布局尺寸
类型      布局宽度     列宽 间隙宽度

大屏幕    大于等于1200px70px30px

默认      大于等于980px 60px20px

平板      大于等于768px 42px20px

手机到平板小于等于767px流式列,无固定宽度

手机      小于等于480px流式列,无固定宽度


/* 大屏幕 */

@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) { ... }
 



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客