search

zhangzheng-zz / blog

1 stars 0 forks source link

CSS相关 #5

Open zhangzheng-zz opened 3 years ago

zhangzheng-zz commented 3 years ago

rem 移动端适配

rem vw 媒体查询

@media screen and (max-width: 320px) { html { font-size:29.629px; font-size: 9.25925925vw } }

@media screen and (min-width: 321px) and (max-width:360px) { html { font-size:33.333px; font-size: 9.25925925vw } } ......

zhangzheng-zz commented 3 years ago

img 默认间隙的解决方案？

多个img之间有间距？包含img标签的div之间有间距？ 多个img标签的左右间隙，行内元素之间有“回车”、“tab”、“空格”。 块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（与font有关，不一定是5px），包含图片的不同div之间有间隙，这是因为图片与父元素的底边有距离。

解决方案：

zhangzheng-zz commented 3 years ago

html换行产生空白符的坑及解决办法？

 <span>{{showInTheGameData.actDate}}</span>
 (<span>{{showInTheGameData.periodNum}}</span>)期
 <span>参赛中</span>
// 第二个 span 标签的左右会产生空白符

解决方法：

zhangzheng-zz commented 3 years ago

CSS3 中的 linear-gradient 在 picker/area 组件中的应用？

linear-gradient() linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

下面来看一下 linear-gradient 在 vant的 area 组件里面的一个应用。最近遇到一个小需求需要适配一下 vant的 area组件的暗色模式（把背景改成黑色字体改成白色就行），唯一的问题就是透明渐变的效果是怎么实现的？

area 组件：

Snipaste_2020-10-21_18-54-58

先把背景改成黑色字体改成白色马上就明白它的实现原理：

Snipaste_2020-10-21_19-00-12

观察一下代码：一个 mask白色的蒙版，上下垂直角度各有一个透明度的渐变效果，越靠近中间透明度越高。

Snipaste_2020-10-21_19-04-31

background-image: 
linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),
linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));

改成暗色模式：mask蒙版改成黑色。

background-image: 
linear-gradient(180deg,hsla(0,0%,0%,.9),hsla(0,0%,0%,.4)),
linear-gradient(0deg,hsla(0,0%,0%,.9),hsla(0,0%,0%,.4));

最终效果： Snipaste_2020-10-21_19-09-22

黑暗模式，CSS的控制可以使用CSS变量。