zoukankan      html  css  js  c++  java
  • 移动端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】媒体查询,为了响应式设计而生

  • 相关阅读:
    二分图最大匹配的König定理及其证明
    HDOJ 2389 Rain on your Parade
    HDOJ 1083 Courses
    HDOJ 2063 过山车
    POJ 1469 COURSES
    UESTC 1817 Complete Building the Houses
    POJ 3464 ACM Computer Factory
    POJ 1459 Power Network
    HDOJ 1532 Drainage Ditches
    HDU 1017 A Mathematical Curiosity
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3170823.html
Copyright © 2011-2022 走看看