随笔分类 - CSS
this is css
摘要：基于nuxt 2.0.0 安装postcss-px-to-viewport npm安装 npm install postcss-px-to-viewport --save-dev 或 yarn安装 yarn add -D postcss-px-to-viewport 在nuxt中配置postcss-
阅读全文
摘要：需求背景:需要通过穿透div对下层的div进行点击或者鼠标滑动事件 1.上层div无事件执行,只需在上层元素的样式里添加: point-events:none 2.上层div的某个子元素里有事件执行,想穿透其他没有事件的子元素执行下层div的事件 ①给上层最外层元素添加: point-events:
阅读全文
摘要：css的calc是计算函数，可以通过搜索引擎学习其他的计算思路。 这是该计算函数兼容性。 这里直接开门见山！！ 1920设计稿 html { font-size: calc(100w / 19.2) } 在1920设计稿中1rem等于100px，.32rem等于32px 随着屏幕的宽度缩小或放大会变
阅读全文
摘要：Tailwind CSS 和 windicss 都是基于 utility-first 的 CSS 框架，它们有着相似的设计原则和使用方法。但是它们也有一些不同之处： 文档和社区支持：Tailwind CSS 拥有强大的文档和社区支持，而 windicss 的文档和社区相对较小。这意味着使用 Tail
阅读全文
摘要：overflow:hidden不会被隐藏的情况 拥有overflow:hidden样式的块元素内部的元素溢出有时候不会被隐藏。当同时满足以下条件： 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；内部溢出的元素是通过po
阅读全文
摘要：vite中使用less npm安装 npm install less less-loader -D 在style标签注明即可 <style lang="less"> </style> 什么是scoped 实现组件的私有化, 当前style属性只属于当前模块. 在DOM结构中可以发现,vue通过在DO
阅读全文
摘要：2022 年比较火的 web 前端 UI 库 名称简介 iView iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView 的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的 Vue UI 组件框架。iView 生态也做得
阅读全文
摘要：1. 为什么使用 CSS Modules？ 在 React 中，如果你直接在文件中引入 index.css，当父组件和子孙组件的 class 属性相同时，那么会发生 CSS 样式覆盖的问题。如果解决样式覆盖的问题呢？ 使用 BEM 来解决命名冲突，人为手动为每个 class 属性起一个唯一的名字 使
阅读全文
摘要：JS方案 greensock https://greensock.com/ CSS方案 animate.css https://animate.style/
阅读全文
摘要：css实现 <div class="ballon"></div> /*css部分*/ @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ trans
阅读全文
摘要：环境vue-cli3 , "vant": "^2.12.2","vue": "^2.6.11" Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexibl
阅读全文
摘要：uni-app开发，graceUI和uViewUI 哪一个更好呢？ graceUI要收费 uViewUI免费 初入uniapp踩过的坑 https://www.jianshu.com/p/0dfa73779a0b 1.资源使用绝对路径（有利于兼容） <!-- 绝对路径，/static指根目录下的st
阅读全文
摘要：https://blog.csdn.net/mossbaoo/article/details/89519726 普通使用使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译
阅读全文
摘要：轻量、可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro postcss-pxtorem vue:将px转化为rem，适配移动端vant-UI等框架 https://www.jianshu.com/p/220a186cc033 Dat
阅读全文
摘要：1.解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok） 行高设置为 normal 则可以解决。 然后高度通过padding填充 2.H5移动端ios/Android兼容性总结 https://www.jianshu.com/p/c55
阅读全文
摘要：一、用户修改手机字体设置大小，影响App里打开的web页面。 手机字体设置大小，影响App的页面。Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放，按照百分百显示。 二、用户调整浏览器字体大小，影响的是从浏览器打开的
阅读全文
摘要：vue-cli3 css使用 px2rem适配 https://blog.csdn.net/m0_37846579/article/details/89036507 vue-cli3 scss使用 px2rem适配 https://www.jianshu.com/p/1613b599d5be vue
阅读全文
摘要：iconfont字体图标 https://www.cnblogs.com/hjvsdr/p/6639649.html 得把字体文件加载进去，不然会存在兼容问题。
阅读全文
摘要：1.@2x@3x图片调用和border1px解放方案 https://blog.csdn.net/wandoumm/article/details/80167197 2.sass的安装使用，ruby安装 https://www.jianshu.com/p/f092ea086547
阅读全文
摘要：swiper官网 https://www.swiper.com.cn/ 1.swiper display:none 后 在显示 滑动问题 只需加两行 具体描述 swiper 官网 的api http://www.swiper.com.cn/api/Observer/2015/0308/218.htm
阅读全文
