探究手机端网页设计尺寸

作者:课课家教育更新于： 2016-09-02 16:01:22

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

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

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

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

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

　　步骤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的分辨率和尺寸都有所了解了吧，希望大家在设计手机端网页时，都要留意下它们的尺寸和分辨率，以免不合适。希望这节教程能对大家有所帮助。如果大家还想了解更多更精彩的教程，欢迎继续关注我们课课家教育，我们将为大家带来更多更精彩的教育咨询，考证、软考等内容。