CSS 常用语法记录

工作中会用到的 CSS 语法笔记

媒体查询

设备屏幕宽度常用断点

设备屏幕设备尺寸很多，一般写断点时以 Apple 设备的屏幕尺寸为标准

• min-width 表示移动端优先
  • 样式默认在所有屏幕尺寸下都有效
  • 常用于先写移动端的场景
• max-width 表示 PC 端优先
  • 样式默认在指定屏幕尺寸下有效
  • 常用于先写 PC 端的场景

移动端

移动端包含手机和平板

/* iPhone 4 / 5 等 */
@media (min-width: 320px) {
}

/* iPhone 6 - 8 / X / XS 等 */
@media (min-width: 375px) {
}

/* iPhone 6 - 8 Plus / XR 等 */
@media (min-width: 414px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 640px) {
}

/* iPad mini 等 */
@media (min-width: 768px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 960px) {
}

/* iPad Pro 12.9 */
@media (min-width: 1024px) {
}

PC 端

@media (max-width: 1280px) {
}

@media (max-width: 1366px) {
}

@media (max-width: 1440px) {
}

@media (max-width: 1920px) {
}

@media (max-width: 2560px) {
}

---

屏幕尺寸查询工具

• 屏幕尺寸大全
• screen size map 可视化屏幕尺寸比较

滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  /* 纵向 */
  width: 8px;
  /* 横向 */
  height: 8px;
  background-color: #ededed;
}
/* 滚动条上的按钮(上下箭头) */
::-webkit-scrollbar-button {
  display: none;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #ededed;
}
/* 滚动条轨道，没有滑块 */
::-webkit-scrollbar-track-piece {
  background-color: #ededed;
}
/* 垂直滚动条和水平滚动条交汇的部分 */
::-webkit-scrollbar-corner {
  background-color: #ededed;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d6d6d6;
}
/* 右下角拖动块 */
::-webkit-resizer {
  display: none;
}

::-webkit-scrollbar | MDN