什麼是 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 是一個支援眾多程式編輯器的外掛