leon-kfd / Dashboard

Custom your personal browser start page from some configurable components.
https://doc.howdz.xyz
MIT License
947 stars 116 forks source link

搜索框能调水平的宽(长)度,但是垂直的高度调不了。 #103

Closed ToBEaNewbility closed 10 months ago

ToBEaNewbility commented 11 months ago

在某次同步数据后,我所有端的搜索款只能固定垂直的高度,这在高dpi显示器上显得太细了。 我第一次用的时候好像还可以调,现在改组件尺寸不起作用。 屏幕截图 2023-12-03 231431

leon-kfd commented 11 months ago

看了一下代码,之前搜索组件设计是使用了rem做响应式,单独更改尺寸是不会生效的。如果你想更改高度,可以尝试全局注入以下css,使用缩放进行调整。

.material-search .search-wrapper-box {
  transform: scale(1.4);
}

image scale

ToBEaNewbility commented 11 months ago

谢谢大佬,这个自定义程度以及使用体验真的很爽。btw 想问一下,除了scale还有直接调整高度的参数吗,scale貌似是调整整个控件的大小,对用栅格排版不大友好(当然换成fixed的物料还行)~再次感谢回复!

leon-kfd commented 11 months ago
:root {
  font-size: 24px;
}
.material-search .search-engine-box img,
.material-search .search-btn svg {
  width: 1.4rem;
  height: 1.4rem;
}

试一下上面这段css

ToBEaNewbility commented 11 months ago

goooooood,有点好奇是怎么实现的?root里的字体大小和搜索框有什么关系,后面的参数应该是对应font-size对图标作修正

leon-kfd commented 11 months ago

image 因为之前search物料是考虑做响应式设计的,用了rem单位,现在想一下用em合适一点。用了rem就是根据:root的font-size来算。如果用em就是根据最近的父元素来算。这种要有前端知识才懂吧,注入CSS也是这样去玩

ToBEaNewbility commented 11 months ago

大概懂了,感谢!