11/10 切版直播-2020秋季班(2)
響應式基本設定
字體、行高、大小
- 預設字體
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}//_variables.scss
$font-family-base:-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
//_base.scss
body{
$font-family-base
}第三週作業提供的 Noto Sans 字型的網址
- 行高
body {
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
- 大小
h1, .h1 {
font-size: 3rem;
}
//平板
@media (max-width: 768px) {
.h1{
font-size: 2.5rem;
}
}
//手機
@media (max-width: 414px) {
.h1{
font-size: 2rem;
}
}
font-size: 3rem;
}
//平板
@media (max-width: 768px) {
.h1{
font-size: 2.5rem;
}
}
//手機
@media (max-width: 414px) {
.h1{
font-size: 2rem;
}
}
SCSS 可以使用變數、mixin...
//_variables.scss
$font-size-base: 1rem; //16px
$font-size-sm: $font-size-base * 0.875; //14px
$h1-font-size: $font-size-base * 4; //64px
$h2-font-size: $font-size-base * 3; //48px
$h3-font-size: $font-size-base * 1.75; //28px
$h4-font-size: $font-size-base * 1.5; //24px
$h5-font-size: $font-size-base * 1.25; //20px
$h6-font-size: $font-size-base; //16px
//_base.scss
h1, .h1 {
font-size: $h1-font-size;
@include pad{
font-size: 2.5rem;
};
@include mobile{
font-size: 2rem;
};
}
色彩
以主色為例
primary: #AA0601;
primary-light: #AA06010D; // rgba(170, 6,1, 0.05);
primary-dark: #650300;用 SCSS 寫可以用 darken lighten
$primary: #AA0601;
$primary-dark: darken($primary, 15%);
$primary-light: lighten($primary, 75%); 間距
m - margin
p - padding
t - top
b - bottom
r - right
l - left
x - top+bottom
y - right+left
margin-bottom = mb
mx-3
ml-3 mr-4<div class="mb-1 mb-md-1 mb-sm-1">...</div>
.mb-1{
margin-bottom: 16px;
}
//平板
@media (max-width: 576px) {
.mb-md-1{
margin-bottom: 8px;
}
}
//手機
@media (max-width: 375px) {
.mb-sm-1{
margin-bottom: 4px;
}
}
margin-bottom: 16px;
}
//平板
@media (max-width: 576px) {
.mb-md-1{
margin-bottom: 8px;
}
}
//手機
@media (max-width: 375px) {
.mb-sm-1{
margin-bottom: 4px;
}
}
同學問到說為何不點不直接寫在 .mb-1 ，還要另外用名稱改變
→ 因為有些區塊在桌機版有 mb-1 不代表縮小後他還需要 mb 所以寫在一起會不彈性
共同設定 SCSS
//_base.scss 全站設定
*,*::before,*::after {
box-sizing: border-box;
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
}
img {
max-width: $w-100;
height: auto;
display: block;
}
h1, .h1 {
font-size: $h1-font-size;
@include pad{
font-size: 3rem;
};
@include mobile{
font-size: 2rem;
};
}
版面配置
同時比對桌機、平板、手機的樣子
Viewport 設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">
容器 container
max-width 的單位不要用 %
.container {
max-width: 1110px;
margin: 0 auto;
}
//平板
@media (max-width: 576px) {
.container{
max-width: 690px;
}
}
//手機
@media (max-width: 375px) {
.container{
max-width: 345px;
}
}
max-width: 1110px;
margin: 0 auto;
}
//平板
@media (max-width: 576px) {
.container{
max-width: 690px;
}
}
//手機
@media (max-width: 375px) {
.container{
max-width: 345px;
}
}
//_base.scss
.container {
max-width: 1110px;
margin: 0 auto;
@include pad{
max-width: 690px;
}
@include mobile{
max-width: 345px;
}
}
.container {
max-width: 1110px;
margin: 0 auto;
@include pad{
max-width: 690px;
}
@include mobile{
max-width: 345px;
}
}
圖片設定
SCSS
//_base.scss
img {
max-width: 100%;
height: auto;
display: block;
}
img {
max-width: 100%;
height: auto;
display: block;
}
Horizontal Rule
第三週檢核重點
斷點設計
- 斷點檢查：檢視在 375、568、768、992px 是否會顯示 x 軸，有學生會只顧及 375、768px，但介於熱門斷點之間的解析度會沒顧到
- .container 容器設計都用 width，沒有用 max-width
使用者體驗
- 點擊體驗：PC 版表頭選單，可以在選單連結 a 加上 display: block ，並藉由 padding 來增加點擊範圍
navbar:ul>li>a
li -> margin-right 或 margin-left (x)
a -> padding: 8px 16px (o)按鈕與連結部分是否有做設計 hover 效果，例如確認送出的按鈕
字不要變大，可以用淡入/淡出(opacity)、變換顏色(color)、陰影(box-shadow)、CSS3(transform, animation)
字不要變大，可以用淡入/淡出(opacity)、變換顏色(color)、陰影(box-shadow)、CSS3(transform, animation)
2. 使用者習慣：.logo 是否有加上回首頁的連結， logo 通常都會有回首頁的功能連結
第三週困難的部分
- a padding
- 中英文字體設定
filter: brightness(...);第四週 SCSS練習
- @import
- 使用頁面拆分 > 元件拆分
_variables.scss //變數
_reset.scss //css reset
_base.scss //全站
_utilities.scss //顏色、間距、 flex 通用
//頁面
index.scss
...
//元件
button.scss
...
_reset.scss //css reset
_base.scss //全站
_utilities.scss //顏色、間距、 flex 通用
//頁面
index.scss
...
//元件
button.scss
...
2. 巢狀
過度巢狀
.card{
.card-header{
.card-header-img{}
}
.card-body{
.card-body-title{}
.card-body-text{}
.card-body-link{}
}
}
.card-header{
.card-header-img{}
}
.card-body{
.card-body-title{}
.card-body-text{}
.card-body-link{}
}
}
簡化
.card{
.card-header{}
.card-img {}
.card-body{}
.card-title{}
.card-text{}
}
.card-header{}
.card-img {}
.card-body{}
.card-title{}
.card-text{}
}
- 練習不要使用標籤
- (X) .profile h2 {...}
- (O) .title {...}
- 變數、運算
HTML 5 結構
<nav class="nav">...</nav> ->導覽列
<header class="header">...</header>
<main>
<section class="container">h2 h3</section>
...
</main>
<footer class="footer">...</footer>
<header class="header">...</header>
<main>
<section class="container">h2 h3</section>
...
</main>
<footer class="footer">...</footer>
layout
每個版面幾乎都有的區塊，常見的是 header 和 footer 區塊
實務上會分為前台的 layout 以及後台的 layout 兩種
---
title: 前台首頁
layout: ./app/layout.ejs
engine: ejs
current: index.html
---
---
title: 後台首頁
layout: ./app/dashboard.ejs
engine: ejs
current: backend.html
---
layout 使用範例
//layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%- title %></title>
<link rel="stylesheet" href="./assets/style/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<header class="header d-flex">
...
</header>
<%- contents %>
<footer class="footer">
...
</footer>
<script src="./assets/js/vendors.js"></script>
<script src="./assets/js/all.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%- title %></title>
<link rel="stylesheet" href="./assets/style/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<header class="header d-flex">
...
</header>
<%- contents %>
<footer class="footer">
...
</footer>
<script src="./assets/js/vendors.js"></script>
<script src="./assets/js/all.js"></script>
</body>
</html>
將 head 資訊獨立成 head.ejs 檔案
//layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('head.ejs') %>
</head>
<body>
<header class="header d-flex">
...
</header>
<%- contents %>
<footer class="footer">
...
</footer>
<script src="./assets/js/vendors.js"></script>
<script src="./assets/js/all.js"></script>
</body>
</html>