Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tutorial / Responsive Design

Responsive Design

CSS, Font, Icon

HTML Structure

<html>

</html>

Portal Columns

Henry Lin: 在同一個網頁 (網址) 響應各種裝置特性 (尺寸) 調整呈現形式,讓使用者有舒適的瀏覽體驗。

除了 Responsive 之外,像 Adaptive 或 Mobile 也是相關概念的形容詞。使用 Viewpoint 來標示,可以細分為 Flexible Layout、Media Query、Flexible Media 三個重點,用來深入淺出體驗 Responsive Design 想要達到的效果。

<meta name="viewpoint" content"width=device-width, initial-scale=1, maximum-scale=1">

Device Width 尺寸單位的說明

http://www.webdesignshock.com/wp-content/uploads/2012/03/responsive-widths.png

Responsive Web Design With HTML5 CSS3: p.11 應該先從最小尺寸的螢幕開始設計,再逐步擴展至大尺寸的螢幕,重點不是侷限在顯示尺寸的調整,而是針對不同設備的特性,讓使用者享受特有的內容或功能。HTML5 提供更豐富的語意設定,CSS3 提供更精簡的展現設定,它們都是設計上的重要工具。

Liquid Layout Example Free HTML5 Templates

工具 Viewport Testing Tools Breakpoint Screenfly Responsivepx.com

Safari: Resize ResizeMe

Firefox: Firesizer

test page

Viewport vs Screen Size

Table LayoutIt.com: Bootstrap Interface Builder

Sketch

sc.social.like: icon made with SASS + SVG

Responsive

Webflow

Responsive Design for SixFeetUp

Responsive Design Workflow Using Two Browsers

Samples: http://www.doaks.org/ Navigation Patterns Data Tables Text Font Icon Unicode Characters: amp-what

metadata clickable links: Products.Poi

CSS

CSS:

div.row span.left {  float: left;  text-align: left;  font-weight: bold;  color: #fff;  width: 49%;  }
div.row span.right {  float: right;  text-align: right;  font-weight: bold;  color: #fff;  width: 49%;  }

HTML:

<div style= "width: 90%; background-color: #666;border: 1px solid #333; padding: 0px; margin: 0px auto;"><div class="spacer"></div>
<div class="row"><span class="left">首頁 > 產品</span><span class="right">[商標]</span></div>
<div class="spacer"></div>
</div>

中文縮排/凸排 範例 {margin-left: 4em; text-indent: -4em}

wrap 換行 line break overflow-wrap

Leading Label with Multiple Lines Followed

FOLLOWED Multiple Lines
ANOTHER LINE

內框線 .box {background: white; border: red 1px solid; box-shadow: 0 0 0 5px white;}

Mockup Modal Dialog Size: max-width @plone-grid-float-breakpoint plonetheme.barceloneta/theme/less/modal.plone.less

Animation:

Form Fieldset, Legend, Label

plonetheme.barceloneta/theme/less/forms.plone.less: jQuery Mobile / Bootstrap 預設方式

Centerization 置中 居中設計 Overflow 溢出邊界範圍

Selection Section 需要合適的預設值

Use display: inline-block instead of problematic float:left

Color Blind 色盲支援 LESS 應使用變數而不是相對路徑形式來避免 Mockup 測試錯誤

LESS not selector 瀏覽器支援度不同 &:not(.plone-toolbar-submenu-header)