首頁 > web前端 > html教學 > 2016.9.25學習細節雜記

2016.9.25學習細節雜記

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-09-26 08:27:17
原創
973 人瀏覽過

正常情況下 使用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;}}

使用圖片時 用div包裹img 不能直接甩img裸在body

優雅降級
一開始在兼容性好的瀏覽器做網頁 在慢慢做 兼容性差的瀏覽器的適應

 

逐漸增強

一開始做好所有 瀏覽器 螢幕的適應 不過只做了基本功能 後來再慢慢填充內容

 

bootstrap中container 定寬度100%

如果導航和尾部應用了position fixed 屬性那麼中間內容部分  排版定位時 不要使用定位用margin或者padding去撐距離 否則用定位的那個元素會呈現在做過fixed的導航上方遮擋住導航   absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航   absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航   absolute 和relative 都不能呈現在做過fixed的導航上方遮擋住導航   absolute 和relative 都不能使用結果可自行測試.....

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板