RWD ( Responsive Web Design )

什麼是 meta viewport
viewport 有兩種

visual viewport : 是一個 js 物件，可以在瀏覽器的 console 中找到它的寬度用螢幕看，就等同於 screen.width 的值
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 是一個支援眾多程式編輯器的外掛

RWD ( Responsive Web Design )

tzutzu858

Related Posts

Comments

tzutzu858

Related Posts

機器人作業系統ROS

DOM-網路事件處理

[08] JavaScript 入門 - 模組、this

Comments