css干货收藏

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%;
}