将1rem转换为10px

最新推荐文章于 2024-03-13 17:37:22 发布
原创 最新推荐文章于 2024-03-13 17:37:22 发布 · 756 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #javascript #jquery

本文介绍了一种利用jQuery和devicePixelRatio属性来设置HTML根元素字体大小的方法，以此实现1rem等于10px的效果，从而达到响应式布局的目的。

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]

pxToRem:将样式文件的px转换为rem
03-18
px转rem小工具 ...// 参数10代表：1rem = 10px pxToRem ( 10 ) ; 再将你所有需要转换的样式文件加入px-styles中 最后在根目录下执行命令，转换后的文件将输出在rem-styles文件夹中 node index . js
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置，仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; ...
html设置某一行的字号为10px,设置html为font-size:62.5%，1rem != 10px问题
weixin_28020031的博客
06-01 2636
桌面端这个问题出现在桌面端因为桌面端chrome限制最小字体为12px方法一：设置html为font-size:625%，这样1rem=100px 因为默认的字体大小为16px；方法二：此方法由用户通过设置Chrome浏览器的高级选项设置 -> 显示高级设置… -> 网络内容 -> 显示自定义字体 -> 最小字号 -> 设置最小(若font-size:62. 5%则小...
设计稿尺寸设计rem换算，调整根目录fontSize。根据根节点的的fontSize，换算指定父元素的fontSize，在父元素下的子元素使用em并实现1em = 10px；vw em rem互相换算
最新发布
Sunny_lxm的博客
03-13 829
设计稿尺寸设计rem换算，调整根目录fontSize。根据根节点的的fontSize，换算指定父元素的fontSize，在父元素下的子元素使用em并实现1em = 10px；vw em rem互相换算
为什么即使设置html为font-size:62.5%，有时候1rem != 10px
chenzhifu86886的博客
03-10 404
为什么即使设置html为font-size:62.5%，有时候1rem != 10px 问题描述 <!DOCTYPE html> <html> <head> <title>为什么有些情况1rem不等于10px</title> &lt...
移动端rem和px的转换
LzzMandy的博客
05-11 890
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.
设置html为font-size:62.5%，1rem != 10px问题
weixin_34409703的博客
08-28 1577
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue项目自动转换 px 为 rem的实现方法
10-17
在前端开发中，为了实现不同屏幕尺寸下的响应式布局，常常需要将像素（px）单位转换为相对单位，如rem。rem（root em）是一种基于根元素（通常是html）字体大小的长度单位，使得我们可以根据屏幕尺寸动态调整元素...
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：
详解vue2.0 不同屏幕适配及px与rem转换问题
08-27
3. **使用px2rem转换插件**： 直接将px单位转换为rem单位，可以在项目开发初期避免大量的手动计算。常用的插件如postcss-px2rem能够自动完成这个转换过程。通过npm安装该插件： ```bash $ cnpm install postcss-...
html设置某一行的字号为10px,为什么即使设置html为font-size:62.5%，有时候1rem != 10px...
weixin_39953629的博客
06-01 411
为什么即使设置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 2304
为什么要使用rem 之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。 例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。 Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级
px和rem的区别是什么
qq_45814648的博客
01-12 828
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度。
h5 - rem设置
BUSTER 的博客
02-20 1120
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。 同样rem也有很多实现方式，不过都是根据rem特性，基于根（html）的font-size大小来做，我见过很多页面 font-size:62.5% 到现在不知道这个是怎么玩的。 rem相对于根(html)的font-size大小来计算 例如
vue rem适配
qq_26841153的博客
09-27 478
vue项目需要用rem做项目响应式的时候，为了更好用px换算为rem 1.安装扩展cssrem 2.可以修改扩展的1rem默认多少px，默认的是16px 可以在设置修改默认值，我习惯iPhone6分辨率375，适配14px,将原来16改为14 3.在需要适配的里面加上css，这个是小尺寸320以下的分辨率页面html{默认值为12px,大于320的分辨率，页面html默认值为14px。当然可以按自己的需要改 @media all and (max-width:321px){ html{font-
关于移动端使用rem做屏幕大小适配
qq_45642119的博客
05-18 374
关于移动端使用rem做屏幕大小适配 html {font-size: 62.5%} 首先，rem是以html为基准。 一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。 为了更方便的进行换算（比如1：10），就可以加样式： html,body{ font-size: 62.5%; } 设置了62.5%以后就有 1rem=10px，便于用rem指定元素的尺寸（比如1.2rem=12px,
根据分辨率设置rem根大小
Embrace924的博客
11-20 2438
函数内部设置 当前设计页面1920 最大页面3840 分辨率为1920时 1rem=10px 分辨率为3840时 1rem=20px /** * 根据分辨率设置rem根大小 * */ (function (designWidth, maxWidth) { var doc = document, win = window, ...
H5使用rem移动端适配方案
qq_44552416的博客
03-23 2301
谈到rem，我们首先就要说一下移动端的适配问题: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的;那么 **1rem = 10px;**我们使用rem主要作用就是为了适配移动端不同屏幕对应尺寸单位大小的区别来达到兼容效果。
px与rem和rpx的换算以及应用场景
ceike的博客
05-13 5391
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。所以,如果html的font-size是16px,则1rem = 16px。如果html的font-size是20px,则1rem = 20px。
移动端高清适配方案：rem布局与1px精确处理
grunt-px2rem是一款基于Grunt的工具插件，它的主要功能是自动将项目中的px单位转换为rem单位，减少前端工程师手动转换的重复工作量。通过预设的配置，grunt-px2rem可以在构建过程中自动完成px到rem的转换，以支持rem...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值