Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tutorial / Responsive Design

Responsive Design

CSS, Font, Icon

Best Practice for Minimalist Web Design Design Style Guides Example CSS or JavaScript: When to Use 5 JavaScript Guidelines When Using Important is the Right Choice

Mobile Design

Enhancement Tips

HTML Structure



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 尺寸單位的說明

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

Liquid Layout Example Free HTML5 Templates

工具 Viewport Testing Tools Breakpoint Screenfly

Safari: Resize ResizeMe

Firefox: Firesizer

Recreate Medium Article Layout with CSS Grid

test page

Viewport vs Screen Size

Table Center Table Tutorial Table CSS Example Bootstrap Interface Builder

Sketch icon made with SASS + SVG Image Loading using SVG as Placeholder



Responsive Design for SixFeetUp

Responsive Design Workflow Using Two Browsers

Samples: Navigation Patterns Data Tables Text Font Icon Unicode Characters: amp-what

metadata clickable links: Products.Poi



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%;  }


<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>

中文縮排/凸排 範例 {margin-left: 4em; text-indent: -4em} Alignment Howto Quick - margin: auto; width: 50%

wrap 換行 line break overflow-wrap

Leading Label with Multiple Lines Followed

FOLLOWED Multiple Lines

內框線 .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: Hover Button

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)

left + right cells

<div class="speakers">
  <div class="speaker">
   <div class="speaker-img">
    <!-- img src="" /-->
   <div class="speaker-info">
<p>Research Professor<br>
Dr. Alayne Street-Perrott<br>
Swansea University, United Kingdom</p>
  <div class="speaker">
   <div class="speaker-img">
    <!-- img src="" /-->
   <div class="speaker-info">
Dr. Rudolf Brázdil<<br> masaryk="" university="" czech="" republic="" lt="" p="" gt="" div="" pre="">


.speakers {
  padding: 2.5rem 2.5rem 0 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
@media (max-width: 768px) {
  .speakers {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
.speaker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
  border: none;
.speaker .speaker-img {
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
.speaker .speaker-info {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;