mozilla
您的搜尋結果

    設計及建立的 Web app

    這些文獻和導引提供了一些資訊,在設計您的 app 及建立使用者介面時相當有幫助。

    App 設計

    設計方針
    幫助您創造具吸引力及易於使用的 app 的建議及導引。
    易於反應的設計
    您的 app 應該要能依照各個裝置特徵、具備調節到不同螢幕大小的能力。這份導引會幫助您學會怎麼做到這件事情。
    您的 app 的 "簡短說明"

    如果只有搭電梯的時間,您要怎麼描述您的 app 給某個人聽呢?那就是您的 app 的elevator pitch、這是一個寫給使用您 app 的使用者的簡明摘要以及為什麼對使用者而言,您的 app 是派的上用場的。

    排版及結構

    Media queries
    Media query 是朝向自適應設計 (responsive design)的一個關鍵的技術;它讓您的 CSS 設計可以依照使用者的裝置能力自行調適。
    Media queries in JavaScript - window.matchMedia
    DOM 提供了一些功能,支援用程式進行 media query 的測試。這個功能可以藉由 MediaQueryList 的 methods 和 properties來達成。
    Flexible boxes
    CSS flexible boxes 讓您的 app 的使用者介面可以依照顯示畫面的大小和擺放方式 (orientation)來自動調整元件 (element)的位置和大小。
    Custom elements
    一份 custom x-tag 元件的導引、幫助您建立一致的使用者介面。

    繪圖及動畫

    CSS 轉換 (CSS transforms)
    CSS 轉換讓您旋轉、縮小及放大 HTML 內容,在不依賴 JavaScript的前提下、使用所有可用的硬體加速。
    CSS transitions
    CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.
    CSS animations
    CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.
    HTML canvas
    The HTML <canvas> element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.
    WebGL
    WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.
    SVG
    Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.

    View All...

    Tools for app developers
    Technology reference documentation
    Getting help from the community

    If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

    Don't forget about the netiquette...

     

    Document Tags and Contributors

    Contributors to this page: teoli, naihsi
    最近更新: teoli,
    隱藏側邊欄