移動端頁面預設樣式重置

2022-07-16 08:06:10 字數 1081 閱讀 4371

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設定為0,去掉點選鏈結和文字框物件時預設的灰色半透明復蓋層(ios)或者虛框(android)

-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此屬性,設定touch時鏈結區域高亮為50%的透明紅,只在ios上起作用。android上只要使用了此屬性就表現為邊框。在body上加此屬性,這樣就保證body的點選區域效果一致了

2.outline:none

(1)在pc端為a標籤定義這個樣式的目的是為了取消ie瀏覽器下點選a標籤時出現的虛線。ie7及以下瀏覽器還不識別此屬性,需要在a標籤上新增hidefocus="true"

(2)input,textarea  取消chrome下預設的文字框聚焦樣式

不同type的input使用這個屬性之後表現不一。text、button無樣式,radio、checkbox直接消失

4.-webkit-user-select

-webkit-user-select: none; // 禁止頁面文字選擇 ,此屬性不繼承,一般加在body上規定整個body的文字都不會自動調整

5.-webkit-text-size-adjust

-webkit-text-size-adjust: none; //禁止文字自動調整大小(預設情況下旋轉裝置的時候文字大小會發生變化),此屬性也不繼承,一般加在body上規定整個body的文字都不會自動調整 

6.-webkit-touch-callout

-webkit-touch-callout:none; // 禁用長按頁面時的彈出選單(ios下有效) ,img和a標籤都要加

7.-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;// 區域性滾動(僅ios

5以上支援) 

重置預設樣式

最近看到乙個詞叫css reset。什麼叫做css reset呢?我理解為重置css,也就是重置預設樣式。我在html下的預設樣式 中講到,一些標籤元素在html下有乙個預設屬性值,我們在寫css頁面的時候,為了避免在css中重複定義它們,我們需要重置預設樣式 css reset www.taoba...

移動端開發 頁面樣式重置的幾個知識點

一 在手機中,當處於模組一狀態時,使用者觸控到 按鈕 a標籤的邊框顯示出來,這明顯不是我們要想要的體驗。加上 webkit tap highlight color即可去除。webkit tap highlight color rgba 0,0,0,0 transparent 利用此屬性,設定touc...

HTML預設樣式重置

doctype html utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge default style title 表示所有元素 style head 一般開發都會先...