html5 pc端初始css样式,移动端&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兼容代码不断更新和优化中...

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

CSS样式初始化代码

CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化 ...

js 设备判断(移动端pc端 安卓ios 微信)

苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

css样式兼容各个浏览器时的部分总结

[本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...

分享一下自己在用的CSS样式重置代码

通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

REM布局计算,移动端,pc端有兼容性)

rem布局计算(移动端,pc端有兼容性)