search

leon-kfd / Dashboard

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

搜索框能调水平的宽（长）度，但是垂直的高度调不了。 #103

Closed ToBEaNewbility closed 5 months ago

ToBEaNewbility commented 7 months ago

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

leon-kfd commented 7 months ago

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

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

image scale

ToBEaNewbility commented 7 months ago

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

leon-kfd commented 7 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 7 months ago

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

leon-kfd commented 7 months ago

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

ToBEaNewbility commented 7 months ago

大概懂了，感谢！