Css样式引发的思考
问题
作为一个不擅长css的前端，经常会遇见一个问题。就是同样宽度的元素在我的mac4k屏幕上，跟同事的windows 1980x1080的屏幕上展示的大小不一致，导致开发完在别人的电脑上样式会很奇怪。
很苦恼，为什么？？？
终于决定搞懂其中的诡异：
像素密度（PPI，Pixels Per Inch）是用来衡量屏幕上每英寸内的像素数量的指标。它决定了屏幕上图像和文本的清晰度。PPI 的计算公式如下：
计算步骤
获取屏幕的分辨率：水平像素数和垂直像素数。
获取屏幕的物理尺寸：屏幕的对角线长度（英寸）。
计算 PPI：使用上述公式。
例子
假设你有两个屏幕：
屏幕 A: 分辨率为 1920x1080，尺寸为 24 英寸。
屏幕 B: 分辨率为 3840x...
实现next官网滚动线条
实现next.js官网的滚动线条效果
原理是设置background-image 为 linear-gradient，然后设置background-repeat重复展示，最后是通过设置background-size 去控制展示的大小 看起来像一个个小点组成的虚线，最后是使用动画控制
<div style={
position: 'absolute',
right: 0,
top: 0,
width: '1px',
height: '0%',
background: 'linear-gradient(180deg,rgba(0,0,0,calc(0.15 * 3)),rgba(0,0,0,calc(0.15 * 3)) 50%,transparent 0...
网页默哀置灰
html {
/*兼容FF*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/*兼容IE内核*/
filter:progid...
axios multipart/form-data在ios下的异常情况解决记录
场景： 用iPhone（v.ios15 打开支付宝扫码打开webapp，在H5上使用文件上传报错， 前端示例代码如下：
const data = new FormData()
data.append('file', img)
axios.post({url: 'xxx', data, headers: {'Content-type': 'multipart/form-data;'}})
解决办法：
axios.post({
transformRequest: (data) => {
data.tostring = () => "[object FormData]"
return data
},
})
HTTPS加密
https 加密
http众所周知是明文传输的无状态的，相对而言https更加安全一些，得益于https的加密策略。 https的加密涉及了 对称加密 非对称加密以及数字签名的设计…
对称加密
由服务器端生成一份 密钥X 明文传输给浏览器端。浏览器端用密钥加密后传输给服务器端，服务器再解密。双方各持同一份密钥。
但是在这个过程万一被人拦截下密钥X 就很不安全
非对称加密
服务器持一对 公钥A 公钥B
服务器明文把公钥A发送给浏览器，浏览器传输数据时候用公钥A 去加密，服务器用私钥B 解密，暂时来看是安全的
但是如果当一种情况 公钥A 被拦截了， 服务器用私钥加密后发送数据给浏览器的时候被中间人用拦截的公钥去解密了。。 这就很不安全了
改良后的非对称加密
服务器浏览器双方各持...
浏览器缓存策略
浏览器缓存策略
正常浏览器发起一次全新的http请求时候会响应200状态码，并且返回一些列的缓存结果，这个200在很多时候都是强缓存，
当再次发起相同的请求时候会根据上次的缓存结果服务端再次返回缓存结果，浏览器会根据缓存的结果去命中不同的缓存策略（即强缓存、协商缓存）。当强缓存时候 查看Network面板可以看到部分信息，size 中
大致的强缓存都会显示 from memory cache, from disk cache，这两种区别 前者是从浏览器的内存中的缓存中读取 存在时效性快速性， 后者是直接通过I/O去读取本地的硬盘，速度较于缓存中直接读取较慢。
强缓存(Expires, Cache-Control
Exprires HTTP1.0 产物
设置缓存到期时间 不安全，机器...
共计 16 篇文章，2 页。