Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tutorial / Responsive Design

Responsive Design

CSS, Font, Icon, Material Design, animation https://blog.prototypr.io/goodbye-adobe-43d4fc4d6095 https://medium.com/javascript-in-plain-english/4-useful-html5-features-you-probably-dont-know-a4be822378d0

RGBtoHEX HTML5 Validator html5check.py

Icon: icons8.com 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

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

.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 https://medium.com/@timigod/front-end-vs-back-end-vs-client-side-vs-server-side-7a04b3ec8764

Liquid Layout Example Free HTML5 Templates

工具 Viewport Testing Tools Breakpoint Screenfly Responsivepx.com

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 LayoutIt.com: Bootstrap Interface Builder

Sketch

sc.social.like: icon made with SASS + SVG Image Loading using SVG as Placeholder Boxy SVG Editing Tool

Responsive

Background Image Webflow

Table: CSS + Grid Layout

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>

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

CSS

.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