css各种干货 转载:http://www.imooc.com/article/51405
1、
<script>
var html = document.getElementsByTagName("html")[0];
var w = document.documentElement.clientWidth || document.body.clientWidth;
html.style.fontSize = w/18.75 +"px";
</script>
2、页面开头需要加入
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
3、css单位用rem
4、用媒体查询
@media screen and (max-width: 320px) {
html {
font-size: 10px;
}
}
@media screen and (min-width: 321px) and (max-width: 375px) {
html {
font-size: 12px;
}
}
@media screen and (min-width: 376px) and (max-width: 414px) {
html {
font-size: 14px;
}
}
@media screen and (min-width: 415px) {
html {
font-size: 15px;
}
}
5、字体大小根据不同视口进行调整
:root {
font-size: calc(2vw + 1vh)
}
body {
font-size: 1rem
}
6、禁用鼠标事件(IE上有兼容性问题)、移动端禁止图片长按功能
/* PC、移动端都禁止点击事件 */
.no-events {
pointer-events: none
}
/* 移动端禁止长按呼出菜单 */
.no-callout {
-webkit-touch-callout: none
}
7、移动端禁止用户长按选择文字功能
.unselect {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
8、文字渐变
.text-gradient {
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
9、背景渐变
.gradient {
background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -o-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0)))
}
10、为手持设备制定特殊样式
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">
11、移动端顺畅滚动
.scroll-touch {
-webkit-overflow-scrolling: touch
}
12、硬件加速
写transition、animation时,请用transform代替left、top等属性,从而使动画更流畅
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0)
}
13、移动端屏幕旋转时,字体大小保持不变
html, body, form, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%
}
14、横竖屏匹配
/* 竖屏时样式 */
@media all and (orientation:portrait) {
body::after {
content: '竖屏'
}
}
/* 横屏时样式 */
@media all and (orientation:landscape) {
body::after {
content: '横屏'
}
}
15、三角形
.traingle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid salmon;
}
16、倒影
div {
-webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.3))
}
17、动画相同、缓动不同
.ball1 {
animation: move .6s ease-in infinite alternate;
}
.ball2 {
animation: move .5s ease-in infinite alternate;
}
.ball3 {
animation: move .4s ease-in infinite alternate;
}
@keyframes move {
100% {
transform: translateY(30px);
}
}
18、斜线
.box {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #313131;
overflow: hidden;
}
.box::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 1px;
background-color: #313131;
transform: rotateZ(45deg) scaleX(2);
}
19、将checkbox改造成switch组件(利用伪类checked状态)
html
<input class='switch-component' type='checkbox'>
css
/* 背景层 */
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
/* 按钮 */
.switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
/* 选中状态时,背景色切换 */
.switch-component:checked {
background-color: #86c0fa;
}
/* 选中状态时,按钮的位置移动 */
.switch-component:checked::after {
left: 50%;
}