Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tutorial / Responsive Design

Responsive Design

CSS, Font, Icon, Material Design, animation

RGBtoHEX HTML5 Validator

Icon: How To Become UI UX Designer CSS flexbox Fundamentals Visual Guide Accelerated Mobile Pages: Google AMP in 2019 why AMP bad Web Guide: CSS Counters building-a-consistent-ui-design-system

:not() Selector 26 Steps of Product and Dashboard Design

.two-line {
  line-height: 1.5em !important;
  height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

CSS3 Mouse Hover Effect in Image


<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

Good to Great UI Animation Tips Animated Nav Component Best Practice for Minimalist Web Design Responsive Design with CSS Variables with a Line of CSS Design Style Guides Example CSS or JavaScript: When to Use 5 JavaScript Guidelines When Using Important is the Right Choice CSS Techniques for Image Important CSS Concept Material UI Library eea.googlecharts

UI Design Cheat Codes

中文字型: 顯示順序設定原則 : 英文在前、比較通用的設定在後面。

font-family: Georgia, 標楷體

Mobile Design

Enhancement Tips

Material Design

Designing Notification for Apps

Spotify Example

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 提供更精簡的展現設定,它們都是設計上的重要工具。

.col-xs- .col-sm- .col-md- .col-lg-
auto     750px    970px    1170px
auto     ~62px    ~81px    ~97px
30px (column both sides: 15px)

HTML Table getting-started-with-html-tables

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 Boxy SVG Editing Tool


Background Image Webflow

Table: CSS + Grid Layout

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>

Positioning 中文縮排/凸排 範例 list-style-position: outside; {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 置中 圖檔置中 box+img 居中設計 Overflow 溢出邊界範圍

Selection Section 需要合適的預設值

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

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

Complete CSS Flex Box Tutorial 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;

Z-Index: tips

Flexbox: Animated Tutorial

Make Your Website Feel Fast

Pastanaga: demo video

How To Check If an Input is Empty with CSS

CSS Display Declare

Body Scroll Lock