正常情況下 使用bootstrap 比原生代碼 寫響應式佈局更快 補充上一文《bootstrap的實際應用》： web端 必做相容性 適應各種瀏覽器 可能有幾套圖 經常使用雪碧圖 app端 有不同的屏幕尺寸 且必須進行自適應{ @media srceen 或者 bootstrap 或者 JS } 也 ...
正常情況下 使用bootstrap 比原生代碼 寫響應式佈局更快
補充上一文《bootstrap的實際應用》：
bootstrap的lang ：<html lang="zh-CN"> 之前班上很多同學忘了改這個 原生的lang為 <html lang="en">
由於bootstrap本質是已經寫好了固定的css的樣式 所以要修改從bootstrap複製過來的內容時 請在 例如：
<button type="button" class="btn btn-default" style="height: 1.875rem;border: none;">微信登錄</button> 里修改 也就是 內聯
才會起作用 如果你自己本身用的外聯link XXXX 的css樣式想去修改bootstrap複製過來的某個東西時 起不了作用
web端 必做相容性 適應各種瀏覽器 可能有幾套圖 經常使用雪碧圖
app端 有不同的屏幕尺寸 且必須進行自適應{ @media srceen 或者 bootstrap 或者 JS } 也經常使用雪碧圖
* 雪碧圖 可以提高網頁載入速度 多圖整合為一張
* 做自適應 寬必須為百分比 高度儘量也用百分比 不可避免的情況下 用rem margin、 padding 最好用百分比 其次 rem
* 移動端必須加 meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
不允許用戶縮放
手機各個屏幕尺寸下的fontsize 大小換算
@media screen and (min-width: 1242px){html{font-size: 38.8125px;}}
@media screen and (min-width: 960px){html{font-size: 30px;}}
@media screen and (max-width: 750px){html{font-size: 23.4375px;}}
@media screen and (max-width: 640px){html{font-size:20px;}}
@media screen and (max-width: 414px){html{font-size:12.9375px;}}
@media screen and (max-width: 360px){html{font-size:11.25px;}}
@media screen and (max-width: 320px){html{font-size:10px;}}
使用圖片時 用div包裹img 不能直接甩img裸在body
優雅降級
一開始在相容性好的瀏覽器做網頁 在慢慢做 相容性差的瀏覽器的適應
逐漸增強
一開始做好所有 瀏覽器 屏幕的適應 不過只做了基本功能 後來再慢慢填充內容
bootstrap中container 定寬度100%
如果 導航 和 尾部 應用了position fixed 屬性 那麼 中間內容部分 排版定位時 不要使用 定位 用margin或者padding去撐距離 否則 用定位的那個元素 會呈現在 做過fixed的導航上方 遮擋住導航 absolute 和 relative 都不能使用 結果可自行測試.....
