常用代码

img 无 src 时隐藏

img[src=""],
img:not([src]) {
  opacity: 0;
}

iPhoneX、XS、XR、XSMas 适配

/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}

/* iphone 6、6s、7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
}

/* iphone 6+、6s+、7+、8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
}

/* iPhoneX、XS、XR、XSMas */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .title {
    padding-top: 0.44rem;
  }
  .bottom {
    padding-top: 0.34rem;
  }
}

文本溢出...显示

.single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiple {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

滚动条样式

/* 滚动条整体样式 */
::-webkit-scrollbar {
  display: none;
}
/* 滚动条里面轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}
/* 滚动条里面小方块 */
::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #81d4fa;
}
/* 滚动条轨道两端按钮 */
::-webkit-scrollbar-button {
}
/* 滚动条中间部分内置轨道 */
::-webkit-scrollbar-track-piece {
}
/* 边角两个滚动条交汇处 */
::-webkit-scrollbar-corner {
}
/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
::-webkit-resizer {
}

自定义字体

/*
  不同字体文件的 format() 不一样
  src: url('fonts/xxx.svg') format('svg');
  src: url('fonts/xxx.eot?') format('eot');
  src: url('fonts/xxx.woff') format('woff');
  src: url('fonts/xxx.ttf') format('truetype');
*/
@font-face {
  font-family: "self-font";
  src: url("fonts/xxx.ttf") format("truetype");
}
.word {
  font-family: "self-font";
  font-size: 50px;
}

css 苹方字体

/* 苹方-简 */
font-family: PingFangSC-Regular, sans-serif; // 常规体
font-family: PingFangSC-Ultralight, sans-serif; // 极细体
font-family: PingFangSC-Light, sans-serif; // 细体
font-family: PingFangSC-Thin, sans-serif; // 纤细体
font-family: PingFangSC-Medium, sans-serif; // 中黑体
font-family: PingFangSC-Semibold, sans-serif; // 中粗体

/* 苹方-繁 */
font-family: PingFangTC-Regular, sans-serif;
font-family: PingFangTC-Ultralight, sans-serif;
font-family: PingFangTC-Light, sans-serif;
font-family: PingFangTC-Thin, sans-serif;
font-family: PingFangTC-Medium, sans-serif;
font-family: PingFangTC-Semibold, sans-serif;

/* 苹方-港 */
font-family: PingFangHK-Regular, sans-serif;
font-family: PingFangHK-Ultralight, sans-serif;
font-family: PingFangHK-Light, sans-serif;
font-family: PingFangHK-Thin, sans-serif;
font-family: PingFangHK-Medium, sans-serif;
font-family: PingFangHK-Semibold, sans-serif;

全网页置灰

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  /* IE 兼容 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

点击元素产生背景或边框

/*
 ios点击链接，会出现半透明灰色遮罩
 android点击链接，会出现边框或者半透明灰色遮罩
 winphone点击标签, 会出现灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
*/
a,
button,
input,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-modify: read-write-plaintext-only; /*-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符*/
}

解决 ios 点击元素出现阴影或闪烁问题

-webkit-tap-highlight-color: transparent;

禁止长按链接与图片弹出菜单

a,
img {
  -webkit-touch-callout: none;
}

禁止 ios 和 android 用户选中文字

html,
body {
  -webkit-user-select: none;
  user-select: none;
}

改变 placeholder 颜色值

/* WebKit browsers */
::-webkit-input-placeholder {
  color: #999;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
  color: #999;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
  color: #999;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
  color: #999;
}
input:focus::-webkit-input-placeholder {
  color: #999;
}

ios 取消 input 英文首字母大写

<input autocapitalize="off" autocorrect="off" />

ios 下输入框默认内阴影

input {
  -webkit-appearance: none;
}

font-size 单位选择

/* 如需适配多种移动设备，建议使用rem，以下为参考值：10*16 = 62.5%； */
html {
  font-size: 62.5%;
}
/* 设置12px字体，这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级 */
body {
  font-size: 12px;
  font-size: 1.2rem;
}

消除 transition 闪屏

.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

开启硬件加速

/* Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。*/
.css {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

css 实现序列帧动画

/* 如序列帧播放时右侧显示下一帧的一列像素内容，减小1像素宽度可解，问题机型：iPhone6 */
.cat_animate_right {
  width: 100px;
  height: 200px;
  transform: rotateY(180deg); /* 可翻转图片，做反向序列帧 */
  background-image: url("./animate.png");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: catPngList 1.3s 1s forwards steps(10);
}
@keyframes catPngList {
  100% {
    background-position: -1000px 0;
  }
}

横竖屏

/* 竖屏时样式 */
@media all and (orientation: portrait) {
}
/* 横屏时样式 */
@media all and (orientation: landscape) {
}

<!-- 竖屏样式 -->
<link
  rel="stylesheet"
  media="all and (orientation:portrait)"
  href="portrait.css"
/>
<!-- 横屏样式 -->
<link
  rel="stylesheet"
  media="all and (orientation:landscape)"
  href="landscape.css"
/>

window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function() {
  // 方法一
  setTimeout(() => {
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight ? 'landscape' : 'portrait';
    if(orientChk =='lapdscape'){
      // 横屏
    }else{
      // 竖屏
    }, 100);
  }

  // 方法二
  // if (window.orientation === 90 || window.orientation === -90 ){
  //   // 横屏
  // }
  // if (window.orientation === 180 || window.orientation === 0) {
  //   // 竖屏
  // }
}, false)

vw 定制 rem 布局

html {
  font-size: calc(100vw / 7.5);
}

transform 水平垂直翻转

// 水平翻转
transform: scale3d(1, -1, 1);

// 垂直翻转
transform: scale3d(-1, 1, 1);

// 倒叙翻转
transform: scale3d(-1, -1, 1);

ios 弹性滚动

div {
  -webkit-overflow-scrolling: touch;
}

::selection 文本选中样式

div::selection {
  background-color: #3c9;
}

CSS 高级属性

属性	说明	链接
text-align-last	末行文本对齐
writing-mode	文字排版
object-fit	图片宽高适配	MDN object-fitopen in new window
filter	滤镜	MDN filteropen in new window CSSgram:一个支持滤镜的框架open in new window
mask	遮罩层	MDN maskopen in new window
caret-color	改变输入框光标颜色

文字渐变效果

<p class="words words1" data-word="文字遮罩效果">文字遮罩效果</p>
<p class="words words2">文字遮罩效果</p>

.words {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: #e87828;
}

// 方式一：借助 before 和 mask 属性实现
.words1::before {
  content: attr(data-word);
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #932b0b;
  -webkit-mask: linear-gradient(to right, #932b0b, transparent, #932b0b);
}

// 方式二：借助 gradient 和 background-clip 属性实现
.words2 {
  background: linear-gradient(90deg, #932b0b 0%, #e87828 50%, #932b0b 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

文字遮罩预览

input 输入光标颜色

input {
  caret-color: red;
}

解决 ios 端 z-index 层级问题

.parent {
  position: absolute;
  z-index: 10;
  transform: translateZ(1px);
  .child {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

# 常用代码

# img 无 src 时隐藏

# iPhoneX、XS、XR、XSMas 适配

# 文本溢出...显示

# 滚动条样式

# 自定义字体

# css 苹方字体

# 全网页置灰

# 点击元素产生背景或边框

# 解决 ios 点击元素出现阴影或闪烁问题

# 禁止长按链接与图片弹出菜单

# 禁止 ios 和 android 用户选中文字

# 改变 placeholder 颜色值

# ios 取消 input 英文首字母大写

# ios 下输入框默认内阴影

# font-size 单位选择

# 消除 transition 闪屏

# 开启硬件加速

# css 实现序列帧动画

# 横竖屏

# vw 定制 rem 布局

# transform 水平垂直翻转

# ios 弹性滚动

# ::selection 文本选中样式

# CSS 高级属性

# 文字渐变效果

# input 输入光标颜色

# 解决 ios 端 z-index 层级问题

常用代码

img 无 src 时隐藏

iPhoneX、XS、XR、XSMas 适配

文本溢出...显示

滚动条样式

自定义字体

css 苹方字体

全网页置灰

点击元素产生背景或边框

解决 ios 点击元素出现阴影或闪烁问题

禁止长按链接与图片弹出菜单

禁止 ios 和 android 用户选中文字

改变 placeholder 颜色值

ios 取消 input 英文首字母大写

ios 下输入框默认内阴影

font-size 单位选择

消除 transition 闪屏

开启硬件加速

css 实现序列帧动画

横竖屏

vw 定制 rem 布局

transform 水平垂直翻转

ios 弹性滚动

::selection 文本选中样式

CSS 高级属性

文字渐变效果

input 输入光标颜色

解决 ios 端 z-index 层级问题