样式代码 · 前端笔记

[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`注册一个空事件即可