正常情況下 使用bootstrap 比原生程式碼 寫入響應式佈局更快
補充上一文《bootstrap的實際應用》:
bootstrap的lang :<html lang="zh-CN"> 之前班上很多同学忘了改这个 原生的lang为 <html lang="en"><br>由于bootstrap本质是已经写好了固定的css的样式 所以要修改从bootstrap复制过来的内容时 请在 例如:
<button type="button" class="btn btn-default" style="height: 1.875rem;border: none;">微信登录</button> 里修改 也就是 内联<br>才会起作用 如果你自己本身用的外联link XXXX 的css样式想去修改bootstrap复制过来的某个东西时 起不了作用
web端 必做相容性 適應各種瀏覽器 可能有幾套圖 經常使用雪碧圖
app端 有不同的螢幕尺寸 且必須進行自適應{ @media srceen 或 bootstrap 或 JS } 也經常使用雪碧圖
* 雪碧圖 可以提高網頁載入速度 多圖整合為一張
* 做自適應 寬必須為百分比 高度盡量也用百分比 不可避免的情況下 用rem margin、 padding 最好用百分比 其次 rem
* 行動端必須加 meta viewport
@media screen and (min-width: 960px){html{font-size: 30p; media screen and (max-width: 750px){html{font-size: 23.4375px;}}
@media screen and (max-width: 640px){html{font-size:20px;}}
@media screen and @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;}}
優雅降級
一開始在兼容性好的瀏覽器做網頁 在慢慢做 兼容性差的瀏覽器的適應
逐漸增強
一開始做好所有 瀏覽器 螢幕的適應 不過只做了基本功能 後來再慢慢填充內容
bootstrap中container 定寬度100%
如果導航和尾部應用了position fixed 屬性那麼中間內容部分 排版定位時 不要使用定位用margin或者padding去撐距離 否則用定位的那個元素會呈現在做過fixed的導航上方遮擋住導航 absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航 absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航 absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航 absolute 和relative 都不能使用結果可自行測試.....