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

2022-04-03 05:04:39 字數 1358 閱讀 7091

一、 在手機中,當處於模組一狀態時,使用者觸控到「按鈕」,a標籤的邊框顯示出來,這明顯不是我們要想要的體驗。加上-webkit-tap-highlight-color即可去除。

-webkit-tap-highlight-color:rgba(0,0,0,0)|transparent;

利用此屬性,設定touch時鏈結區域透明度alpha設定為0,去掉點選鏈結和文字框物件時預設的灰色半透明復蓋層(ios)或者虛框(android),推薦在body上加此屬性,這樣就保證body的點選區域效果一致了。

為了讓你的**感覺更快,你需要讓你的按鈕立即響應使用者的觸控,給使用者乙個明顯的視覺指示--有些事情正在發生。

有乙個很讚的屬性用在**上的按鈕或鏈結;它是:active偽類。我們在桌面端一直使用這個偽類。

在手機端如果想要相應相應使用者的觸控,立即給出明顯的視覺響應,可以用這個。

加上此屬性會將webkit瀏覽器中的元素預設樣式去除。這裡我分享個鏈結

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

三、阻止按下選中選擇文字,可以使用-webkit-user-select

-webkit-user-select:none;

**請謹慎使用這個屬性:因為大部分使用者是來檢視資訊的,他們可以複製並儲存下來以備將來之用,所以這種方法既無用也無效。如果你禁用了複製貼上功能,使用者還是可以通過檢視原始檔來獲取到他們想要的內容。

四、當樣式表裡font-size<12px時,瀏覽器裡字型顯示仍為12px,這時可以用-webkit-text-size-adjust

-webkit-text-size-adjust: none;

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

五、當你觸控並按住觸控目標時候,想禁止或顯示系統預設選單可以用-webkit-touch-callout

-webkit-touch-callout:none;

img和a標籤都要加。

六、手機端,解決 overflow-y:scroll;卡頓問題-webkit-overflow-scrolling

-webkit-overflow-scrolling : touch;

移動端頁面預設樣式重置

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

關於移動端swiper的2種樣式重置

思路 主要考慮選擇器優先順序大於預設就可以隨意擼碼 注意 該demo裡用的mobile adaptive.js是讓頁面以rem自適應,也就那麼幾行。可以參考 位址 下面附上重置樣式的 top banner.top bannerlists a,top bannerlists img.swiper co...

關於移動端swiper的2種樣式重置

思路 主要考慮選擇器優先順序大於預設就可以隨意擼碼 注意 該demo裡用的mobile adaptive.js是讓頁面以rem自適應,也就那麼幾行。可以參考 位址 下面附上重置樣式的 top banner.top bannerlists a,top bannerlists img.swiper co...