移动端&PC端CSS样式兼容代码

CSS样式兼容代码

1.禁止选中复制文本

*{
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}

2.单行文本溢出显示省略号…

p {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
}

3.flex布局兼容

#app {
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
}

4.iOS app滑动卡顿

.content div {
/* 解决iOS页面滑动卡顿 */
-webkit-overflow-scrolling: touch;
overflow: hidden;
overflow-y: auto;
/* overflow-y: scroll; */
}

5.渐变背景颜色

.box {
width: 400px;
height: 400px;
background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%);
}

6.去除PC端浏览器右侧滚动条

html {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
overflow: hidden;
overflow-y: scroll;
scrollbar-width: none;
} html::-webkit-scrollbar {
width: 0 !important;
}

:css兼容代码不断更新和优化中...

上一篇:stm32开发笔记一:使用固件库在RealView-MDK中新建工程(上)


下一篇:mysql的sql_mode 模式修改 my.cnf