RWD ( Responsive Web Design )


Posted by tzutzu858 on 2020-08-12

meta viewport

什麼是 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這個是表示伸縮比，最大最低的伸縮比都在一倍

css3 新單位 vh vw

px、em、rem、%、vh/vm 的差別

  1. px 相對於顯示器屏幕分辨率，縮放螢幕的時候不會隨之變動。
  2. em 相對於當前對象內文本的字體尺寸
  3. rem，r 是 root 的縮寫，相對根元素 <html> 的字體大小
  4. % 相對於它最近的父元素，但要注意的是如果裡面沒有任何內容，設定沒有意義，因為不會顯示出任何東西。
  5. vh / vw
    縮放螢幕的時候，內容物隨之變動，vh (view height)，螢幕可視範圍高度的百分比；vw (view width)，螢幕可視範圍寬度的百分比。例如 : width: 60vw; 就是螢幕寬度的 60%

vmin/vmax

螢幕可視範圍的高度和寬度，兩者的最小值或最大值
如果螢幕是 800px 600px
width: 60vmin;代表寬度是 60% 600px = 360px
width: 60vmax;代表寬度是 60% * 800px = 480px

網頁不要顯示 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 是一個支援眾多程式編輯器的外掛



tzutzu858




Related Posts

[Linux] 離線安裝Ubuntu22.04

[Linux] 離線安裝Ubuntu22.04

 mike-hsieh
[Week 1] Mac 建置基礎環境– Terminal、Git

[Week 1] Mac 建置基礎環境– Terminal、Git

 Mily
[python] 關於python三兩事 - class, __init__, __call__

[python] 關於python三兩事 - class, __init__, __call__

 mike-hsieh

Comments