将1rem转换为10px

最新推荐文章于 2023-04-19 11:05:16 发布
最新推荐文章于 2023-04-19 11:05:16 发布
阅读量624 收藏
点赞数
分类专栏： 前端应用 文章标签： html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42674490/article/details/117745940
版权

jquery,将1rem转换为10px
通过window.devicePixelRatio获取到当前设备的dpr

(function() {
  var dpr = window.devicePixelRatio
  // 使1rem=10px
  var rem = 62.5 / dpr
  $("html").css("font-size",rem+"%")
})();

自适应还需要深入了解（写的较详细）：[http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041]

金包银是喵桑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目自动转换 px 为 rem的实现方法
01-19
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。 1、创建rem.js文件
rem,em换算
Luxuriant_tree的博客
03-27 407
js部分代码，先引入jq var window_width = 750;//设计稿的宽为750px时 var window_size = 100; (function () { $.fn.autoSize = function (options) { options = $.extend({}, $.fn.autoSize.defaults, options || {}); a...
移动端rem和px的转换
LzzMandy的博客
05-11 732
1、参考 使用css方法设置https://blog.csdn.net/unbreakablec/article/details/87268904 使用js方法设置https://www.cnblogs.com/web-wjg/p/7872468.html 2、使用css方法设置1rem=10px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta.
关于rem的网页适配以及JS实现页面滑动（jquery）
a404742630的专栏
10-09 3191
CSS* { margin: 0; padding: 0; } html{ height: 100%; width: 100%; font-size:20px;/* 1rem */ }html定义font-size为20px，即1rem = 20px 之后就可以这样定义了： width: 16rem; height: 28.4rem;当然，如果仅仅是这样的话是
js rem适配及简单使用
qq_38045525的博客
04-19 199
js rem适配及简单使用
html设置某一行的字号为10px,设置html为font-size:62.5%，1rem != 10px问题
weixin_28020031的博客
06-01 2434
桌面端这个问题出现在桌面端因为桌面端chrome限制最小字体为12px方法一：设置html为font-size:625%，这样1rem=100px 因为默认的字体大小为16px；方法二：此方法由用户通过设置Chrome浏览器的高级选项设置 -> 显示高级设置… -> 网络内容 -> 显示自定义字体 -> 最小字号 -> 设置最小(若font-size:62. 5%则小...
为什么即使设置html为font-size:62.5%，有时候1rem != 10px
chenzhifu86886的博客
03-10 346
为什么即使设置html为font-size:62.5%，有时候1rem != 10px 问题描述 <!DOCTYPE html> <html> <head> <title>为什么有些情况1rem不等于10px</title> &lt...
设置html为font-size:62.5%，1rem != 10px问题
weixin_34409703的博客
08-28 1477
2019独角兽企业重金招聘Python工程师标准>>> ...
html设置某一行的字号为10px,为什么即使设置html为font-size:62.5%，有时候1rem != 10px...
weixin_39953629的博客
06-01 318
为什么即使设置html为font-size:62.5%，有时候1rem != 10px问题描述为什么有些情况1rem不等于10pxhtml{font-size: 62.5%;}.div1{width: 500px;height: 100px;background: red;}.div2{width: 50rem;height: 10rem;background: blue;} 按照道理，页面的两个...
css rem的换算
qq_43889848的博客
06-03 1881
为什么要使用rem 之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。 例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。 Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级
gulp-px2rem-plugin：将px转换成rem
02-03
gulp-px2rem-插件 将px转化成rem的gulp插件。... // .pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']})); }); 参数说明 width_design：
详解react内联样式使用webpack将px转rem
10-18
主要介绍了详解react内联样式使用webpack将px转rem，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pxToRem:将样式文件的px转换为rem
03-18
px转rem小工具 ...// 参数10代表：1rem = 10px pxToRem ( 10 ) ; 再将你所有需要转换的样式文件加入px-styles中 最后在根目录下执行命令，转换后的文件将输出在rem-styles文件夹中 node index . js
大屏自适应rem
qq_39704803的博客
05-31 301
大概原理:rem是相对根元素,因此我们只需要在根元素确定一个px或rem字号,则可以来算出元素的宽高 function bodyScale() { var devicewidth = document.documentElement.clientWidth; var scale = devicewidth / 3200; document.documentElement.style.fontSize=(devicewidth/3200).toString()+'rem
【插件】自适应布局JQuery插件，rem布局——和派孔明
xyphf的博客
06-20 3188
JQ插件，JQ自适应插件，rem布局
适合vue/原生js+jq的项目解决rem适配移动端，以及在浏览器打开的尺寸和移动端一样的处理方式，亲测有效且准确
国企程序媛 record 前端技术 & review code。。。
08-19 394
1、在入口文件index.html下引入适配js //适配兼容 (function (n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize",
用jquery实现rem自动适配
星精灵的新世纪
03-07 1705
在网页制作过程中，经常用rem来实现各个屏幕的适配，但是有与设备众多，手动设置经常有匹配不到的情况，所以用jquery检测窗口大小，自动适配字体大小，这里是用taobao的flexible.js+rem实现的适配,话不多说，直接上代码： (function flexible(window, document) { // flexible.js原代码 var docEl = document.documentElement var dpr = window.devicePixel
根据分辨率设置rem根大小
Embrace924的博客
11-20 2172
函数内部设置 当前设计页面1920 最大页面3840 分辨率为1920时 1rem=10px 分辨率为3840时 1rem=20px /** * 根据分辨率设置rem根大小 * */ (function (designWidth, maxWidth) { var doc = document, win = window, ...
js实现WebSocket 连接
热门推荐
weixin_42674490的博客
10-08 2万+
一.WebSocket 简单介绍 1.HTTP和WebSocket的区别 http：通信只能由客户端发起； WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种；在webSocket协议下客服端和浏览器可以同时发送信息。 2.WebSocket应用场景 数据推送：webSocket可以代替ajax轮询（即客户端通过一定的时间间隔不断向服务器发起请求获得数据，因此会占用许多带宽和服务器资源），但是webSocket不一样，当建立T
插件，用于将 px 单位转化为 rem 单位
最新发布
06-09
好的，你可以使用 postcss-pxtorem 插件将 px 单位转化为 rem 单位。 使用方法如下： 1. 安装插件： ``` npm install postcss-pxtorem --save-dev ``` 2. 在 postcss 配置文件中添加插件： ```js module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 基准值，即 1rem 对应的像素值 unitPrecision: 5, // 精度，保留小数点后几位 propList: ['*'], // 需要转换的属性，这里表示所有属性都需要转换 selectorBlackList: [], // 不需要转换的选择器 replace: true, // 是否替换原有的属性值 mediaQuery: false, // 是否在媒体查询中也进行转换 minPixelValue: 0 // 小于等于这个值的 px 单位不进行转换 }) ] } ``` 其中，rootValue 表示 1rem 对应的像素值，propList 表示需要转换的属性，selectorBlackList 表示不需要转换的选择器，replace 表示是否替换原有的属性值，mediaQuery 表示是否在媒体查询中也进行转换，minPixelValue 表示小于等于这个值的 px 单位不进行转换。 3. 在项目中使用 px 单位，插件会自动将其转换为 rem 单位。 ```css /* 在样式中使用 px 单位 */ div { width: 320px; font-size: 16px; } /* 转换后的样式 */ div { width: 20rem; font-size: 1rem; } ``` 希望这个回答能够帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值