- 博客(6)
- 收藏
- 关注
RSS订阅
原创 暗黑模式-UI开发视角分析从零到一实现原理
暗黑模式-UI开发视角分析从零到一实现原理一、什么是暗黑模式二、本质三、暗黑模式的设计四、暗黑模式的重构实现一、什么是暗黑模式暗黑模式DarkMode 是不同于默认模式（高光模式）的界面风格。是以暗色为主题的风格，通常为深灰色或者黑色。二、本质暗黑模式和高光模式切换的本质就是：同一个页面，在两种模式下，遵循两套不同的颜色规范。就像我们每天早上穿衣服一样，今天我想穿衣帽间里深色系的衣服，明天我想穿浅色系的衣服，但是我还是同一个人。三、暗黑模式的设计我们可以先来看一下weui的色值变量：
2020-10-30 22:54:41
846
原创 【图解】reflow和repaint
1、解析HTML以构建DOM树渲染引擎开始解析HTML文档，转换HTML标签到DOM节点，转换出来的产物叫DOM树。DOM树的长相2、解析CSS以构建CSSOM树排版引擎开始解析CSS选择器，把CSS选择器集合解析成一个CSS对象模型（也称CSSOM树）。3、布局渲染树从根节点递归调用，计算每一个元素的位置、大小，给每个节点精确坐标（指的是在屏幕上的精确坐标）。4、绘制渲染树在绘制阶段，系统会遍历渲染树，将其内容显示在屏幕上。...
2021-03-09 19:52:11
488
2
原创 【前端UI】小程序&H5 适配iPhoneX/XS 安全区
【前端UI】小程序&H5 适配iPhoneX/XS 安全区做一个严谨的页面还原稿一、适配的含义可视、可操作区域是在安全区域内。没有做适配的情况：二、安全区的含义不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。三、H5页面适配安全区body { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constan
2020-11-20 17:55:25
2213
2
原创 清明节全网灰色主题实现原理
清明节全网灰色主题实现原理首先，把网站做成一个纯灰色主题，最简单直接的办法就是给整个网站加一个滤镜，就像我们平时自拍完给照片加喜欢的滤镜一样。我们的网页也可以加滤镜，但不是在整个网页上面遮一个div蒙版，而是让整个网页 只有灰色 。一、原理灰色其实是个比较复杂的颜色。从白色到黑色，有无数种灰色，那么这些不同的灰色，就可以代替我们网页中的五颜六色，使整个网页有不同色值的灰色，但是依然很有层次，而且又可以表达出一种深沉的感情。什么是灰度，用图片来解释就是：我们知道RGB代表三个颜色，Red、Gree
2020-11-17 20:30:48
576
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人