• 移动端Web开发


    摘要:

      主要介绍移动端Web开发需要注意的要点,以及一些基础知识,如手机尺寸,手机浏览器,设计理念。

    目录:

      分辨率

      手机浏览器

      设计理念(3S原则)

      响应式Web开发

      移动端开发的水很深啊,下面就上面目录这几项说起吧。

    分辨率

      手机分辨率要比PC分辨率庞杂的多,各种尺寸,各种比例。主要考虑一下两个方向

      1)主流分辨率。经调研发现,目前主流手机分享率为:240*320像素,320*480像素,480*800像素(居多),640*960像素(居多),480*854(9:16)像素(少),1280*720像素(多),1280*800像素,1920*1080。这个我想最好有数据分析部分来看。

      2)目标群所持设备分辨率。 通过自己网站的统计代码统计得到的结果。这个比1更重要,决定了你将做的产品如何设计。

         视网膜屏幕的评定标准是分辨率超过300ppi。

      由视网膜屏幕又带来一个新的概念:“设备像素”。有关这方面的研究,见《视网膜New iPad与普通分辨率iPad页面的兼容处理》

    手机浏览器

        国内手机浏览器,主流有UC浏览器,QQ浏览器,海豚浏览器,百度浏览器等都是基于Webkit内核,对HTML5&CSS3支持都很好,所以大胆的使用吧。

    设计原则(3s)原则

      Simple、Small、Speedy.《Mobile Web Design: Best Practices》。

     Speedy其实是Simple, Small的结果。页面简单,代码小,自然速度就快起来了。

      Web设计方面,简约风格:便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等,当做到了这些,相信网站会变得Speedy。

        移动web开发应该把手机的固有特性优先考虑。首先,手机屏幕相比桌面屏幕很小,所以满屏可显示的内容不多,这就要求我们在页面设计的时候选择好适当的字号,还得考虑文档内容的优先次序,把重要内容靠前显示;其次,手机的交互方式让我们得去重新考虑页面元素的设计。桌面web以鼠标操作为主,这样可操作的范围很精确,移动web以触控操作为主,手指的操作范围比较宽泛,反映在页面上,我以按钮为例,对于小屏幕低分辨率的手机来说,可以把按钮设置为.button{display:block;},而对于大屏幕高分辨率的手机,可以设置为.button{display:inline-block;},这是按钮。对于链接列表,要设置适当的行高,避免可点击的范围太小而操作失误;最后,图片。手机开发应尽量避免图片的使用,像圆角、阴影、渐变等以前在桌面不好实现的情况,在手机开发上已经不存在了,完全可以采用css3来实现,所以设计师在设计psd效果图的时候,就把效果做出来,但切图的时候就不必给出。

     响应式设计

    见我的另一篇文章 【media-queries】媒体查询,为了响应式设计而生

  • 相关阅读:
    The Quad
    将OrCAD Capture CIS的设计文件(.dsn)导入到PADS Logic VX.2.3
    OrCAD Capture CIS 16.6 将版本16.6的设计文件另存为版本16.2的设计文件
    Eclipse IDE 添加jar包到Java工程中
    PADS Logic VX.2.3 修改软件界面语言
    切换Allegro PCB Editor
    Allegro PCB Design GXL (legacy) 将brd文件另存为低版本文件
    Allegro PCB Design GXL (legacy) 设置自动保存brd文件
    Could not create an acl object: Role '16'
    windows 下apache开启FastCGI
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3170823.html
Copyright © 2020-2023  润新知