CSS踩坑

CSS跳坑

视差滚动

网页再向下滑动的时候,控制背景的移动速度比前景的移动速度慢,造成视差

  1. CSS3方式,开发时间短,性能开发性良好,缺点是不能兼容低版本
  2. jQuery实现 ,控制不同层的滚动速度
  3. 插件的方式, eg parallax-scrolling

::before和:after中的双冒号和单冒号的区别

  1. 单冒号 css3伪类选择器,双冒号用于伪元素选择器
  2. ::before就是以一个子元素的存在,定义在元素主题内容之前的一个伪元素,并不存在dom中,只存在页面中

如何让chrome支持小于12px的文字

p{
    font-size:10px;
    -webkit-transform:scale(0.8)
}

有一个高度自适应的div,里面2个div一个定宽,另一个填满父元素

.father{
    position:relative;
}
.son1{
    width:100px;
    height:100%;
}
.son2{
    position:absolute;
    left:100%;
    right:0;
    top:0;
}

什么是webp

webp格式是谷歌2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%,缺点是压缩时间久兼容性不好,目前只有谷歌和opera支持

style标签写在body之前和之后有什么区别

页面的加载顺序是自上而下

当上style写在body之后,

​ 浏览器逐行的对html进行解析,当遇到写在底部的style或者外部的样式会导致浏览器停止对之前的渲染,等待样式加载完继续渲染,在ie浏览器会出现页面闪烁的问题

黑白图像

img.desaturate{
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
}

加载CSS的方式

@import url(style.css);
/*只能用在css文件中或者style标签中*/
<link rel = 'stylesheet'/ href="">

CSS3新增的唯类选择器

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。
<think>好的,用户想了解在React项目中使用postcss-pxtorem时遇到的问题及解决方案。我需要结合提供的引用内容来整理答案。首先,引用3提到了React中使用postcss-pxtorem的基本配置步骤,比如安装、webpack配置和参数设置。引用2和引用4提到了一些常见问题,比如lib-flexible在iPad上的兼容性问题,以及行内样式无法转换的问题。另外,引用1指出vue版本升级导致的问题,虽然用户问的是React,但可能需要注意类似版本兼容性问题。 首先,应该列举常见问题。根据引用2,lib-flexible在iPad上的兼容性问题,解决方法可能是改用vw/vh方案。然后,引用4提到行内样式的px不会被转换,需要手动处理。引用3中的配置参数如rootValue设置不正确可能导致计算错误,这也是一个常见问题。还有,postcss-pxtorem在React中的配置可能需要检查Webpack或Vite的配置是否正确,特别是在React 18或更新版本中是否存在兼容性问题,类似于引用1中的Vue版本问题。 解决方案部分,针对每个问题给出解决方法。例如,iPad兼容性问题可以改用viewport方案,行内样式需要开发者自己转换,配置参数需要根据设计稿调整rootValue,版本升级导致的插件问题可能需要降级或寻找替代插件。此外,可能还要提到排除第三方库的情况,如引用3中的exclude配置,避免转换UI框架的样式。 需要确保回答结构清晰,分点列出问题和对应的解决措施,并引用对应的参考文献。同时注意使用中文,正确应用LaTeX格式,但根据用户的问题内容,可能数学公式较少,所以重点在代码块和引用标注。最后生成相关问题,比如如何配置rootValue,如何处理第三方库样式等。</think>### React项目中postcss-pxtorem常见问题与解决方案 #### 1. **iPad设备兼容性问题** - **问题描述**:使用`lib-flexible`实现弹性布局时,可能出现iPad或iPad Pro显示异常(如内容缩放比例错误)[^2]。 - **解决方案**: 1. 改用`viewport`单位(vw/vh)替代`rem`方案; 2. 结合`postcss-px-to-viewport`插件直接转换px为视口单位[^4]。 #### 2. **行内样式无法转换** - **问题描述**:`postcss-pxtorem`只能转换CSS文件中的`px`,无法处理行内样式(如JSX中的`style={{ width: "10px" }}`)[^4]。 - **解决方案**: 1. 手动将行内样式的`px`转换为`rem`; 2. 使用CSS Modules或外部样式表替代行内样式。 #### 3. **rootValue配置错误** - **问题描述**:若`rootValue`值与设计稿基准值不匹配(如设计稿为750px宽度,但`rootValue`设为固定值19.2),会导致`rem`计算错误[^3]。 - **解决方案**: 1. 动态计算`rootValue`,例如: ```javascript rootValue: (module) => (module.file.includes("vant") ? 37.5 : 75) // 区分UI库和业务代码 ``` 2. 根据设计稿宽度按比例设置,如设计稿750px时,`rootValue = 75`(即1rem = 75px)。 #### 4. **第三方UI框架样式失效** - **问题描述**:若未排除`node_modules`中的UI库(如Ant Design、Vant),可能导致组件样式异常。 - **解决方案**: 在配置中添加`exclude`正则表达式: ```javascript exclude: /(node_module)/ // 排除第三方库目录 ``` #### 5. **版本兼容性问题** - **问题描述**:React 18+或工具链升级后,可能因插件版本不兼容导致报错(如`node.getIterator is not a function`)[^2]。 - **解决方案**: 1. 降级`postcss-pxtorem`至兼容版本; 2. 使用`postcss-px2rem`或`postcss-px-to-viewport`替代。 --- ### 配置示例(Webpack) ```javascript // webpack.config.js { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-pxtorem')({ rootValue: 75, propList: ['*'], exclude: /node_modules/, minPixelValue: 2 }) ] } } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值