移动端DPR和REM

最新推荐文章于 2023-06-21 17:59:20 发布
最新推荐文章于 2023-06-21 17:59:20 发布
阅读量914 收藏
点赞数
分类专栏： 移动端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43138808/article/details/102739206
版权
本文探讨移动端布局中遇到的单位问题，主要关注DPR（设备像素比）和REM作为解决方案的角色。DPR根据设计图尺寸决定，如2倍图、3倍图。在实际开发中，例如设计图宽度为640px，元素宽度100px，实际应写为50px，对应DPR为2。REM则用于不同分辨率设备的适配，通过设置根元素大小，将像素转换为rem单位，确保页面在不同设备上的显示一致性。
摘要由CSDN通过智能技术生成

移动端布局需要解决的问题

单位问题：因为不同的设备具有不同的就要有不同的分辨率而且在因为视网膜高清屏灰度像素点进行再细分的问题，就会导致用ps测量的移动端大小不等同于其真实适配的大小。

解决办法：DPR和REM

DPR名称是设备像素比，通俗的讲就是缩放比例
对于不同的设备，DPR也是不一样的，那么什么才是区别DPR大小的因素呢？
答案就是设计图，设计图的大小会导致DPR为2,3之类的，也就是我们常说的2倍图，3倍图；
常见的移动端的设计图有三个宽度值：640px，750px,1080px;

设计图宽度 DPR
640PX 2
750PX 2
1080PX 2

那DPR是怎么用的呢？

在这里插入图片描述
假如你拿到的设计图的大小是640px，此时当你去写页面的时候量出一个元素的宽度大小是100像素，那么你是直接在页面上去写个宽100px吗？显然就不是，那应该写多少嘞？
就需要参照一下上面的表格，640px对应的DPR是2，所以此时应该要写的像素是100px/2=50px;

REM

最低0.47元/天 解锁文章
qq_43138808
关注
专栏目录
移动端适配dpr
少油少盐不要辣
02-09 3366
这是将layout viewport（布局视口）宽度设置为设备屏幕宽度，这句就得到了理想视口。
lgg-flexible:移动端适配方案（flex + rem + dpr）, lgg-flexible 主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC 一些问题
05-14
lgg-flexible 看来了一些关于移动端布局的资料，目前最佳的移动端移动端适配方案（flex + rem + dpr）, 自己也根据原理写了 lgg-flexible， 主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC 一些问题。 table featrue rem dpr 高清适配 通过 body[data-dpr=*] css选择器控制字体大小 PC 端会默认关闭高清适配，传入 pcREM 作为pc rem值 通过 body[data-mobile="false"] 调控 pc 与 mobile 样式 Usage Install npm i -S lgg-flexible Import [removed][removed] <
移动端响应rem dpr viewport设置
running_shuai的博客
07-24 1327
(function () {       var t;       function initHtmlFont(){           var maxWidth = 640;           var html = document.documentElement;           var windowWidth = html.clientWidth;            
DPR、二倍图、rem
QZ9420的博客
01-11 954
DPR: 物理像素/设备独立像素 这个比值就是DPR 如：iphone6 物理像素是750 设备独立像素是375 那么：750/375 = 2 iphone6的DPR是2 二倍图： 现在，有一张100px x 100px的图片，在DPR = 1.0的设备中，可以完美的显示。 在iphone3G中，此图片背后的发光点有100 x 100个 当我们把它（100px x 100px的图片）放在DPR = 2.0的设备中，它背后对应的发光点有多少个？ 答： 在DPR=2的设备中，此图片背后的发光点有200 x
移动端和PC端（dpr、viewport、rem）
m0_51055743的博客
02-28 818
移动端与网页端的相关介绍 dpr dpr值的意义：当在网页上用CSS划出一条1像素的线段时，当手机的dpr值为2，就会用2个像素划出这条像素。 网页缩放 网页缩放为原来的1/2，就相当于网页本身的大小变成了原来的2倍，下例中变为1:1 meta标签中属性叫做name=“viewport”,viewport指的是手机浏览器的窗口大小，content中指让窗口的宽度跟手机的设备保持一致，当dpr=3,initial-scale取值1/3，即0.333 移动端网页端适配 一：百分比布局(
记录rem、逻辑像素、dpr等术语
mandarava的博客
03-21 444
最近在做h5的一个单页面程序，第一次涉及h5的开发。也是第一次知道rem转换，搞搞原理，特来分享。 相关术语 开始之前，先介绍一些相关术语。物理像素pt、逻辑像素、设备像素比dpr等 物理像素：在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。 逻辑像素：随着屏幕的改朝换代，在高分辨率中可以理解为从黑白电视一个物理像素对应一个逻辑像素变成了一个物理像素可以变成n个逻辑像素。也可以理解为一个物理像素发一个光点，而现在变成了一个物理像素发n个光点各种颜色。.
移动端适配之rem适配的原理
CD_promise的博客
11-05 1138
我们以iPhone6为标准：设备像素是750px，物理像素是375px 假如我们把屏幕分成100份，每一份物理像素= 375/100，就是每一份占的宽度3.75px，既1rem就是一份的宽。 设计稿给定一个元素尺寸为50px，那么这个元素在iPhone6中就占了 50/3.75 = 13.333333333333334rem 由于iPhone6的DPR为2，为了达到高清，设计稿的尺会放大2倍，所以我们会把设计稿缩放为二分之一， 元素适配宽度 =设计稿的尺/DPR /（375/100）rem 0 在这里插入代
Vue在移动端基于rem适配实现思路及过程
qq_49896911的博客
06-21 872
vue，vant，移动端适配
移动端dpr解析
草莓不爱吃白菜的博客
10-16 2467
移动端中 drp是devicePixelRatio的简称，表示的是css样式中1px在当前设备上所占的物理像素个数，苹果6一般作为设计中的基准，一般drp都等于2，也就是我们说的二倍屏 PC端中 在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，也就是drp=1 其实对于我们用户来说，drp越大，手机的分辨率越高，我们的用户体验越好。 这也就是比如我们设置边框为0.5px时，在...
移动端布局（rem+dpr）
weixin_33935505的博客
04-20 121
最近在做一个移动端的项目，在摸索中发现了一种移动端的布局和字体自适应方法，在当下来说应该是最好的了！主要是针对跟我一样还在摸索当中的同学们！主要也为了记录一下我活着过。。。 最主要的是字体使用px，配合用data-dpr属性来区分不同dpr下的的大小。其他使用rem作为单位 div { width: 1rem; height: 0.4rem; font-si...
关于移动端的尺寸适配问题（rem）
王小森的成长博客
04-08 706
近期在做移动端的项目，用到rem的相关知识。先上代码。 //css @media screen and (width: 320px) { html, body { font-size: 8.533px; } } @media screen and (width: 360px) { html, body { font-size: 9.6...
使用 rem dpr 实现移动端的自适应布局应该注意的问题
qq_15972061的博客
10-11 602
我们在上一篇《使用 rem 实现移动端的自适应布局》介绍了如何使用 rem 实现移动端自适应布局的问题，然而在实际项目中还有许多问题需要解决。前端之所以称为前端，就是冲锋陷阵的前方，作品直接对接真实用户，前端产品的质量直接影响用户的体验，也直接体现了整个产品的质量。所以对于前端工程师来说，要把产品做到尽善尽美。 首先看看页面字体问题，根据之前做法，页面中的字体大小可以根据设计稿的大小，通过...
移动端的几种适配方案及rem dpr px font-size之间转换理解
weixin_43797908的博客
08-09 2640
前端开发中，需要在各种不同屏幕尺寸大小的设备上运行页面，所以就需要进行移动端适配 一般有一下几种方法： （）媒体查询media：代码冗余 （）百分比布局：图片之类的会乱 （）弹性布局flex:高度固定，宽度自适应，天猫用的这玩意 （）rem+viewport：这个计算比较复杂，淘宝用的就是这玩意 rem是什么？ 移动端布局用的最多的就是rem啦，rem就是相对元素根节点的字体大小的单位，其实就是一个相对单位，或者一个比例 相对的就是这个font-size，也就是整个html设置的fon...
【移动端】基于rem实现手机端页面自适应--动态改变dpr和font-size
季诗筱的博客
04-26 6384
这两天还是在写手机端的那个表单页面，我好苦恼啊。明明在chrome上调试的时候都是可以的，但是真的用手机去扫码看的时候，就出现问题了。 苹果手机么有问题，都是根据dpr来设置meta标签，动态设置font-size，显示的跟预期的一样。用三星手机扫也是可以的，但是当我用小米4扫的时候，就有问题了。表单宽度和高度都有所缩小，内容显示不全。 我搜了一下，网上有说 米4的dpr也是3. 于是我就自己
移动web开发之像素和DPR详解
热门推荐
开心大表哥
02-09 4万+
前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 　　 什么是像素： 　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...
dpr（设备像素比）与 移动端适配
qq_15972061的博客
09-29 2239
在上一篇文章中（使用 rem 实现移动端的自适应布局），我们讲到 iphone6s 的屏幕宽度为 375px，我们拿到的视觉稿也是基于iphone6s 设计的，但是设计稿的宽度却是 750px，这是为什么呢？ 原因就是 iphone6s 的屏幕 dpr = 2，首先我们先理解 3 个概念： 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在...
移动适配（rem/px）
daisy_lisixi的博客
09-01 775
Sass(使用Sass的函数、混合宏这些功能来实现): 写一个函数px2em传入参数px及基础字体 因为字体实际的rem为 （原始px字体大小／跟字体大小）*1rem@function px2em($px, $base-font-size: 16px) { @if (unitless($px)) { @warn "Assuming #{$px} to be in pixels, a
vue 移动端 element ui 适配rem
最新发布
08-03
在Vue移动端使用Element UI进行适配rem时，主要是为了保证组件的尺寸在各种屏幕大小下都能自适应。以下是一些步骤和注意事项： 1. **引入依赖**：首先，在项目中安装Element UI，然后在main.js或其他入口文件中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值