RWD ( Responsive Web Design )


Posted by tzutzu858 on 2020-08-12

什麼是 meta viewport
viewport 有兩種

  1. visual viewport : 是一個 js 物件,可以在瀏覽器的 console 中找到它的寬度用螢幕看,就等同於 screen.width 的值
  2. layout viewport : 在使用模擬器看手機排版時,可以用如圖的方式看見目前的 layout viewport 大小

<meta name="viewport"> 是當時 Apple 推出 iPhone 時為了讓網頁在 mobile device 上完好顯示,而設計出來的 meta tag

若 html 檔的<head>區塊中少了這個設定,網頁大概從載入完成時的樣子就會跟自己一開始的想像不同,因為若沒有在 meta 中定義 viewport,瀏覽器會自行定義給予預設值

// 指定螢幕寬度為裝置寬度,畫面載入初始縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1" >


// 以下兩種設定都可以防止使用者做畫面縮放,將畫面鎖在縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" >
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0">
initial-scale=1, maximum-scale=1.0, minimum-scale=1.0這個是表示伸縮比,最大最低的伸縮比都在一倍


網頁不可以顯示 X 軸,因為我們都是由上往下看,左右滾輪體驗感很差
max-width : 1200px 最大就是 1200 ,但是視窗縮小會跟著縮小

img {
   max-width :100%;
   height:auto;
}

下面寬度( width + margin-right )加起來,不要超過 100%

menu {
   width:60%;
   margin-right: 10%;
}

全域 border box

*,*::before,*::after{
   box-sizing: border-box;
}

Flex 的外容器與內元件
flex-wrap : wrap


先看權重,再看先後順序
後面改的放後面,如果權重一樣就會被蓋掉

<link rel="stylesheet" href="css/前輩 code.css">
<link rel="stylesheet" href="css/我的 code.css">


參考文章 :
認識 meta viewport
Responsive Web Design 基礎
[技術分享] Emmet簡易教學 - 快速上手包 : Emmet 是一個支援眾多程式編輯器的外掛










Related Posts

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (一) - 基礎程式

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (一) - 基礎程式

原子習慣:法則 2 - 讓習慣有吸引力

原子習慣:法則 2 - 讓習慣有吸引力

openCV 介紹與導入實作

openCV 介紹與導入實作


Comments