分類: CSS

CSS 可以根據版型給予對應的設定

在 CSS 的 Media Query 裡面，有一個設定可以直接根據版面是橫版還是直版來判斷。

orientation: landscape

橫版 或是 橫向

orientation: portrait

直版 或是 直向 或是 縱向

具體看過 w3schools 的範例之後，就會發現，
橫向就是寬大於高，例如 1920 x 1080
直向就是高大於寬，例如 1080 x 1920

用這個設定來進行版面佈局的調整

會比用不同寬度的呈現更好，當然也可以根據寬度加上直向或橫向的組合去進行更細微版型佈局的控制，這樣不同裝置上面的呈現就會更妥當。

參考連結：

10個關於Responsive Design的提示

這10點被製作在這張圖片上面
一開始列出2010年跟2012年各地區的手機流量
接著是10點提示

  1. 保持你的版面簡單 (KEEP YOUR LAYOUT SIMPLE)
  2. 使用媒體查詢 (USE MEDIA QUERIES) + MOST FREQUENT RESOLUTIONS
  3. 定義中斷點 (DEFINE THE BREAKPOINTS)
  4. 讓你的版型更靈活 (MAKE YOUR LAYOUT FLEXIBLE)
  5. 正確呈現你的圖片 (MAKE YOUR PICTURES BEHAVE)
  6. 別忘記 MAX & MIN (DON’T FORGET MAX&MIN)
  7. 產生最好的相對性內容 (MAKE MOST THINGS RELATIVE)
  8. 當使用手機端，要線性思考設計 (WHEN MOBILE LINEARIZE)
  9. 省略非必要的內容 (SKIP THE NON ESSENTIAL CONTENT)
  10. 確認你的META VIEWPORT (CHECK YOUR META VIEWPORT)

閱讀全文 10個關於Responsive Design的提示

使用一致的社交登入按鈕【Social Buttons for Bootstrap】

剛好看到 HackMD – Markdown 協作筆記 的社交登入按鈕

五個社交平台都是一致的按鈕
就想說用『btn btn-lg btn-block btn-social btn-facebook』
去搜尋一下看看會找到甚麼 【我的預設搜尋已經改為 duckduckgo.com 了】
閱讀全文 使用一致的社交登入按鈕【Social Buttons for Bootstrap】