下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

探究手机端网页设计尺寸

作者:课课家教育     来源: http://www.kokojia.com点击数:2647发布时间: 2016-09-04 15:00:15

标签: 手机端设计尺寸比例CSS教程

想学设计?来看看大师是如何完成作品的?

     相信大家都是过手机端网页设计了吧?其实在设计过程中,要特别注意手机的尺寸,以免手机不适应网页的尺寸,所以这次我们课课家教育将和大家一起探究手机端网页设计的尺寸。我们在windowXP常见分辨率1024×768下我们除掉任务栏,而浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。不过在Window7常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。所以于设计来说,要选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,小编建议参考现主流硬件分辨率,这个很关键),然后向下和向上做小、大、特大和低、高、超高的尺寸与密度,这样对比后,才能做出更合适的网页设计的尺寸。

  步骤1:首先我们来说下iPhone手机的尺寸吧。iPhone手机网页的设计尺寸(仅供参考)

  iPhone5尺寸是640x1136px分辨率是326PPI

  iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

  iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

探究手机端网页设计尺寸_手机端设计_尺寸比例_CSS教程_课课家

  步骤2:接着我们来看下安卓手机,以及安卓平板电脑的尺寸吧。

  安卓网页的设计尺寸(包括手机和平板):

  320dp:一个普通的手机屏幕(240X320,320×480,480X800)

  480dp:一个中间平板电脑像(480×800)

  600dp:7寸平板电脑(600×1024)

  720dp:10寸平板电脑(720×1280,800×1280)

  步骤3:然后探究下ipad的尺寸吧。

  ipad网页的设计尺寸(ipad分为好几代,每一代的分辨率都不相同的):

  iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

  iPad第一代第二代尺寸是1024x768px分辨率是132PPI

  iPadMini尺寸是1024x768px分辨率是163PPI

ipad的尺寸

  小编结语:相信大家看完之后,都会对一些手机,平板电脑以及ipad的分辨率和尺寸都有所了解了吧,希望大家在设计手机端网页时,都要留意下它们的尺寸和分辨率,以免不合适。希望这节教程能对大家有所帮助。如果大家还想了解更多更精彩的教程,欢迎继续关注我们课课家教育,我们将为大家带来更多更精彩的教育咨询,考证、软考等内容。

赞(12)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程