一切福田,不離方寸,從心而覓,感無不通。

Category Archives: CSS

Vue中的scoped及穿透方法

外层 >>> 第三方组件 {
样式
}

龙生   03 Dec 2022
View Details

vue安装scss

npm i sass-loader@7.3.1 -D
npm i node-sass@4.14.1 -D

龙生   03 Dec 2022
View Details

less、scss/sass的区别

sass/scss或是less,都可以看作为一种基于css之上的高级语言,其目的是使得css开发更灵活和更强大,sass的功能比less强大,基本可以说是一种真正的编程语言了,less则相对清晰明了,易于上手,对编译环境要求比较宽松,在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss,因为更加强大,更好用。

龙生   03 Dec 2022
View Details

使用 CSS 解决 @2x 和@3x 图片问题

移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:
使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用

龙生   29 Nov 2022
View Details

CSS单位与尺寸参数

px
常用的单位,即像素pixel缩写,但通常被当做绝对单位,但严格说并不是,因为官方考虑到观看不同设备显示屏时,使网页设计出的某一图形的显示大小在人眼中的观看效果差不多,而定义的一个相对值,即人以一臂之遥观看96DPI的显示屏的角度,大概就是利用透视的近大远小原理,照顾不同设备的最终观看效果。

比如某网页图形设置为一固定的px值,在手机浏览器上显示是用直尺测大概1cm,但是同样在不缩放情况下,电脑显示屏测量可能就是1.5cm左右,如果是打印机打印出来的话也许就是2cm左右了。

em
常用的相对单位,前面的数字是比例,即相对于父元素的字体尺寸的比例,比如父元素字体16px,子元素设置1em,也可以理解为100%,那么子元素也是16px,同样,2em就是200%,32px,也可以是小数0.2em,1.5em等等。

rem
类似于em,但rem是相对于根元素html,例如用css标签选择器给html标签设置字体尺寸font-size大小为20px,那么文档中的每个1rem就代表20px,1.5em代表30px,以此类推。

in,cm,mm
这些虽然是生活中的物体测量单位,但网页的1cm尺寸的元素显示到显示器上,用直尺测量通常不是标准1cm,因为css已经默认设置1in=96px,前面也讲过px会因显示屏而不同,因此最终尺寸也不是绝对的,其他也差不多,所以这类尺寸很少用。

龙生   29 Nov 2022
View Details

CSS3实现文字描边的2种方法(小结)

问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜色 该属性使用很简单:text-stroke:1px#f00;(1px是文字宽度,#ff是文字描边颜色)   本以为该属性的兼容性会及时止住我微微上扬的嘴角,随后逐渐凝固 但出乎意料的是大多浏览器已经开始支持该属性,只需要加上前缀-webkit-即可     解决方法二(推荐) 偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow 并且text-shadow属性的兼容性更好,也不用加前缀-webkit-   css 模拟文字描边效果2

    from:https://www.html.cn/qa/css3/112869263329100.html

龙生   21 Apr 2022
View Details