zoukankan      html  css  js  c++  java
  • 移动端&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 {
    	 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- none;
    }
    
    html::-webkit-scrollbar {
    	 0 !important;
    }
    

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

  • 相关阅读:
    代码面试最常用的10大算法
    ant google compiler 压缩
    美工资源
    面试题
    validate表单验证插件
    laypage分页
    layer弹出框小结
    Thymeleaf
    webApp开发
    grunt自动化构建工具
  • 原文地址:https://www.cnblogs.com/zxk5211/p/web_20.html
Copyright © 2011-2022 走看看