![](https://img-blog.csdnimg.cn/798ac2763abb4207b9f07bf1ee0b3319.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
用户体验/自适应
文章平均质量分 65
记录一些简单且可以实质上提升用户体验的内容
RealizeInnerSelf丶
RealizeInnerSelf丶
展开
-
(keep-alive)首页进入页面刷新,子页面返回页面缓存
首页或其他版块进入列表页面刷新数据、页面状态(滚动条、筛选条件、数据结果),从子页面返回时列表状态、数据情况维持进入子页面前的状态转载 2024-03-31 16:03:20 · 466 阅读 · 1 评论 -
浏览器输入框自动填充默认样式移除
账号密码框在浏览器保存了密码的情况下会自动填充,且用户也会需要自动填充,但是填充后会有个很讨厌的默认样式,难以去掉原创 2024-03-26 11:23:55 · 626 阅读 · 0 评论 -
深入中英文的排版与换行
关于 CSS 中英文排版与换行的一些探讨(来源于 张鑫旭 B站发布的视频)转载 2022-07-03 23:29:33 · 1331 阅读 · 0 评论 -
在有限高度容器内使 动态输入框自动滚动到视野内
有限高度内动态添加子项自动滚动到视野内原创 2022-05-31 21:09:14 · 329 阅读 · 0 评论 -
页面部分文字模糊问题修复
在写项目时,发现有部分文字是糊掉的,越看眼睛越累,记录下我的解决方案自己写 demo无法重现这个问题,或许是搭配了 mCustomScrollbar 的原因仔细看会发现右侧菜单的文字有点模糊解决方案一像素一像素的调整父元素的 height / margin / padding / 文字本身的行高 line-height(个人猜测是被挤压的,导致它行高不够,图形绘制)...原创 2020-09-15 20:03:00 · 256 阅读 · 0 评论 -
结合 `pointer-events:none` 实现多悬浮按钮快速布局
在开发地图相关的应用时,基本都会有按钮要浮在地图之上这种情况,按钮可能有一个,也可能有多个那如何让元素方便的定位且在间隔的地方、空白的地方可以响应地图的拖拽呢?(图片仅说明需求,并不指代微信小程序可以使用上述写法)最常用的就是绝对定位,但如果每个元素都去写绝对定位的话,会很麻烦你需要计算下方的元素的 top 值是多少,如果悬浮按钮的个数不确定,个别悬浮按钮还会根据权限显隐,那么这个问题就会更复杂了又或者如图,要求按钮垂直居中分布,那你计算的 top 值可能就不适用了(当然如果你能想到 :nth-原创 2022-03-10 21:45:00 · 326 阅读 · 0 评论 -
文字横向自适应宽度并横向排列
如下图左侧图,候选项是后端的数据字典中动态管理的数据,并不能事先知道文本字数,即选项的所占宽度,也就无法直接设定宽度来让文本拥有个比较好的样式,那么想要达到右侧效果图那样的效果该怎么做?可能很多人会考虑从宽度去解决问题,设置固定宽度 width、最小宽度 min-width…但遇到了字数较多等情况,用户体验并不不怎么好,我愣了一会儿,突然意识到,这是宽度不够,导致文本自动换行了,那我用 css 属性设置文本不换行呢?顺带设置个最大宽度,让太长的文本显示省略号,不至于页面样式混乱 /* 设定最大原创 2022-01-31 21:21:13 · 1252 阅读 · 0 评论 -
使用 CSS 在不影响视觉效果的情况下增大元素的点击面积
使用 CSS 在不影响视觉效果的情况下增大元素的点击面积关键点是透明,实际方案不止这两个,开动你的脑筋,还可以有更多利用透明边框来加大点击面积.btn { border: 5px solid transparent;}利用伪元素加大点击面积CSS 扩大可点击的区域.button { position: relative;}.button::after { ...原创 2021-02-06 21:05:00 · 401 阅读 · 0 评论