css样式的使用以及常见兼容性解决方案。
1. :focus {} 获取焦点的样式,
2. :focus-within:
表示一个元素获得焦点,或,该元素的后代元素获得焦点。
form:focus-within {
background: #ff8;
color: black;
}
3. :active ,:hover ,按钮激活效果,鼠标放上去的效果。
4.使不固定高度盒子里面文字水平、垂直居中的方法。
- 使用表格。
5. input type=number 去除右侧箭头方法
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
6. 滚动条样式火狐有兼容性。
7.绝对定位中多个display:inline-block 上下对不齐。
8. 使用 translate兼容性问题。
{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
// 使用translate位移后,在google浏览器中会使盒子模糊。
}
9.解决最小字体不能小于12px的问题,
body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, p, span {
-webkit-text-size-adjust: none
}
10. 有横向滚动条的内容被垂直触摸,在ios机上无法滚动页面。可使用:
html,body{
position:relative;
-webkit-overflow-scrolling:touch;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-9.select:none;
-wekit-user-select:none
}
11.click事件在IOS系统上有时失效,给绑定click事件的元素加上cursor:pointer解决。
12.placeholder垂直居中问题:在IOS和Android中显示不同。解决方法是:在保证input输入文本垂直居中的条件下,给placehoder设置padding-top。
13.当祖父元素用overflow属性时,父元素采用transform属性会影响子元素定位position:absolute;导致子元素超出隐藏;建议用其他属性替换transform属性。
14.click事件在IOS系统上有时失效,给绑定click事件的元素加上cursor:pointer解决。
15.解决苹果机滚动卡顿问题
body {
-webkit-overflow-scrolling: touch;
}
16.文字超出已...方式显示
//一行...
.hide1 {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
//两行...
.hide2 {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
display: -moz-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
box-orient: vertical;
-webkit-box-orient: vertical
}
17. ios若页面走缓存,可以用此方法清除。window.onpageshow = function(event) if (event.persisted) {window.location.reload()}
18.去除一些默认样式
button, input, select, textarea {
-webkit-appearance: none
}
button {
display: block
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400
}
b, em, i, s {
font-style: normal
}
a, em, img, li, ul {
list-style: none;
border: 0;
text-decoration: none;
font-style: normal
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, textarea, ul {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box
}
19.不同浏览器兼容性处理
/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.input {
margin-left: -30%;
}
}
/*firefox*/
@-moz-document url-prefix() {
.input {
margin-left: -26%;
}
}
url():匹配整个URL;
url-prefix():匹配文档的URL是否以参数指定的值开头;
domain():匹配文档的域名是否为参数中指定的域名或者为它的子域名;
regexp():匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL。
20.使用rem移动端适配方案
@media only screen and (min-width: 320PX) and (max-width: 360PX) {
html {
font-size: 21.33px
}
}
@media only screen and (min-width: 360PX) and (max-width: 375PX) {
html {
font-size: 24px
}
}
@media only screen and (min-width: 375PX) and (max-width: 390PX) {
html {
font-size: 25px
}
}
@media only screen and (min-width: 390PX) and (max-width: 414PX) {
html {
font-size: 26px
}
}
@media only screen and (min-width: 414PX) and (max-width: 640PX) {
html {
font-size: 27.6px
}
}
@media screen and (min-width: 640PX) {
html {
font-size: 35px
}
}