樣式代碼 · 前端筆記

[TOC] # 樣式 ## iphone清除默認樣式 -webkit-appearance 改變按鈕和其他控件的外觀，使其類似于原生控件。 -webkit-appearance: none;去除系統默認appearance的樣式,常用于IOS下移除原生樣式 webkit-tap-highlight-color：color 當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。該屬性可以只設置透明度。如果未設置透明度，iOS Safari使用默認的透明度。當透明度設為0，則會禁用此屬性；當透明度設為1，元素在點擊時不可見。 ## 文字顯示2行需要加上height、line-height兼容。 ```css .ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } ``` ## 優化iphone全屏機底部遮擋問題 ~~~css @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { body.viewport-fit-body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } } ~~~ ~~~html <head> <script> // 優化iphone全屏機底部遮擋問題 window.addEventListener('pageshow', function(e) { if (e.persisted) { document.body.className = ''; } }, false); if ( document.querySelector('[name=viewport]') && document.querySelector('[name=viewport]').attributes && document.querySelector('[name=viewport]').attributes.content && document.querySelector('[name=viewport]').attributes.content.value ) { document.querySelector('[name=viewport]').setAttribute('content', document.querySelector('[name=viewport]').attributes.content.value + ', viewport-fit=cover'); } </script> </head> <body class="viewport-fit-body"> </body> ~~~ <br /> <br /> ## 頭像換行顯示 ![](https://img.kancloud.cn/c4/2a/c42a619d4b60064765f57e5bbfee8b35_261x132.png) <br> ~~~css .group{ display: flex; flex-wrap: wrap; width: 240px; justify-content: center; } .group > div{ margin-bottom: 10px; margin-right: 1px; width: 50px; height: 50px; border-radius: 50%; background: gainsboro; } ~~~ ~~~ <div class="group"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> ~~~ ## 禁止長按 ![](https://img.kancloud.cn/35/e6/35e6ad78a9e179b98c6b8044c1e7a14a_320x580.gif) 以上行為可以總結成這幾個（每個手機以及瀏覽器的表現形式不一樣）：`長按圖片保存`、`長按選擇文字`、`長按鏈接/手機號/郵箱時呼出菜單`。想要禁止這些瀏覽器的默認行為，可以使用以下`CSS`： ~~~ // 禁止長按圖片保存 img { -webkit-touch-callout: none; pointer-events: none; // 像微信瀏覽器還是無法禁止，加上這行樣式即可 } // 禁止長按選擇文字 div { -webkit-user-select: none; } // 禁止長按呼出菜單 div { -webkit-touch-callout: none; } ~~~ ## 滑動不順暢，粘手一般出現在`IOS`設備中，自定義盒子使用了`overflow: auto || scroll`后出現的情況。優化代碼： ~~~ div { -webkit-overflow-scrolling: touch; } ~~~ ## 圖片不拉伸居中 ~~~javascript .img-wrap { display: block; width: 120px; height: 120px; overflow: hidden; border-radius: 8px; background-color: #eee; &::before { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; } img { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } } ~~~ ![](https://box.kancloud.cn/750fc4c9889da9b4ab66149d68b71c2a_317x128.png) ## 解決active偽類失效 ~~~ <body ontouchstart></body> ~~~ 給`body`注冊一個空事件即可