rem设置

rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题

 

var u=navigator.userAgent;

 

if($(window).width()==360&&/SM-900P/.test(u)){  document.style.fontSize=100*(clientWidth)/753+ ' px ' ; }

说明:sm-900p是三星s5的机型,clientwidth是$(window).width();

如何设置rem呢?

 

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return; 
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

### 配置 postcss-pxtorem 限制作用范围 为了使 `postcss-pxtorem` 插件的作用范围限定到特定的文件夹(如 `dataScreen`),可以通过配置其选项中的 `filter` 属性来实现。以下是具体的解决方案: #### 使用 filter 属性限制作用范围 `postcss-pxtorem` 提供了一个名为 `filter` 的属性,允许开发者通过正则表达式或其他逻辑定义插件适用的文件路径。以下是一个完整的配置示例: ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设定根字体大小 propList: ['*'], // 转换所有包含 px 的样式属性 selectorBlackList: [], // 黑名单选择器,避免某些情况下的转换 replace: true, // 替换而不是添加备份代码 mediaQuery: false, // 是否处理媒体查询中的单位,默认不开启 minPixelValue: 0, // 设置最小像素值,低于该值不会被替换 unitPrecision: 5, // 单位精度 filter: ({ file }) => /\/dataScreen\//.test(file) // 只对 dataScreen 文件夹内的文件生效 }) ] }; ``` 上述配置中,`filter` 参数接收一个函数作为输入参数,此函数会接收到当前正在处理的文件路径 (`file`) 并返回布尔值决定是否应用插件[^4]。 #### 动态调整根字体大小 如果项目中有动态调整根字体的需求,则可以结合 JavaScript 实现全局监听机制并更新文档的根字体大小。例如,在 Vue 或 React 中初始化时调用相关方法完成适配。 #### 处理不同屏幕尺寸的情况 对于不同的设备分辨率区间,还可以利用 CSS 媒体查询配合 PostCSS 插件一起工作。比如当屏幕宽度介于指定范围内时单独设置样式规则[^3]: ```scss @media screen and (min-width: 541px) and (max-width: 640px) { body { font-size: calc(1rem + ((1vw - 5.41px) * (20 - 16) / (640 - 541))); } } ``` 以上 SCSS 片段展示了如何基于视窗宽度计算相对应的文字大小变化规律。 --- ### 总结 通过对 `postcss-pxtorem` 插件增加自定义过滤条件以及合理运用其他辅助技术手段,能够有效控制其影响区域仅限于目标目录之下;同时兼顾多终端显示效果的一致性和灵活性需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值