移动端布局（rem+dpr）

最新推荐文章于 2023-06-21 17:59:20 发布

转载最新推荐文章于 2023-06-21 17:59:20 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/binli/p/6735291.html

本文介绍了一种移动端项目的布局和字体自适应方法，适用于不同设备密度的屏幕。通过使用px配合data-dpr属性实现字体大小调整，并采用rem单位进行布局。同时推荐了lib-flexible库简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个移动端的项目，在摸索中发现了一种移动端的布局和字体自适应方法，在当下来说应该是最好的了！主要是针对跟我一样还在摸索当中的同学们！主要也为了记录一下我活着过。。。

最主要的是字体使用px，配合用data-dpr属性来区分不同dpr下的的大小。其他使用rem作为单位

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

淘宝lib-flexible Github传送门

https://github.com/amfe/lib-flexible

使用方法

lib-flexible库的使用方法非常的简单，只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件：

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加载阿里CDN的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

转载于:https://www.cnblogs.com/binli/p/6735291.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端DPR和REM

qq_43138808的博客

10-25

979

移动端布局需要解决的问题单位问题：因为不同的设备具有不同的就要有不同的分辨率而且在因为视网膜高清屏灰度像素点进行再细分的问题，就会导致用ps测量的移动端大小不等同于其真实适配的大小。解决办法：DPR和REM DPR名称是设备像素比，通俗的讲就是缩放比例对于不同的设备，DPR也是不一样的，那么什么才是区别DPR大小的因素呢？答案就是设计图，设计图的大小会导致DPR为2,3之类的，也就是我们常...

DPR、二倍图、rem

QZ9420的博客

01-11

1083

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

参与评论您还未登录，请先登录后发表或查看评论

记录rem、逻辑像素、dpr等术语

mandarava的博客

03-21

603

最近在做h5的一个单页面程序，第一次涉及h5的开发。也是第一次知道rem转换，搞搞原理，特来分享。相关术语开始之前，先介绍一些相关术语。物理像素pt、逻辑像素、设备像素比dpr等物理像素：在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。逻辑像素：随着屏幕的改朝换代，在高分辨率中可以理解为从黑白电视一个物理像素对应一个逻辑像素变成了一个物理像素可以变成n个逻辑像素。也可以理解为一个物理像素发一个光点，而现在变成了一个物理像素发n个光点各种颜色。.

物理像素，逻辑像素(pt)，css像素(px)，像素比(dpr)都是什么？px，em，rem等都是什么？有什么区别？

m0_37856464的博客

10-19

5787

（像素）分辨率：手机屏幕的实际像素尺寸。像素密度(ppi/dpi)：(pixels per inch )每英寸的长度上排列的像素点数量（注：这里的像素，指的是device pixels），是屏幕分辨率的单位。（这项指标是连接数字世界与物理世界的桥梁），1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。（比如 iphone4 的屏幕尺寸是3.5，像素分辨率是 960 * 640px ，则。物理像素：设备屏幕实际拥有的像素点。一个...

使用 rem dpr 实现移动端的自适应布局应该注意的问题

qq_15972061的博客

10-11

650

我们在上一篇《使用 rem 实现移动端的自适应布局》介绍了如何使用 rem 实现移动端自适应布局的问题，然而在实际项目中还有许多问题需要解决。前端之所以称为前端，就是冲锋陷阵的前方，作品直接对接真实用户，前端产品的质量直接影响用户的体验，也直接体现了整个产品的质量。所以对于前端工程师来说，要把产品做到尽善尽美。首先看看页面字体问题，根据之前做法，页面中的字体大小可以根据设计稿的大小，通过...

lgg-flexible:移动端适配方案（flex + rem + dpr）, lgg-flexible 主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC 一些问题

05-14

看来了一些关于移动端布局的资料，目前最佳的移动端移动端适配方案（flex + rem + dpr）, 自己也根据原理写了 lgg-flexible，主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC ...

移动端适配rem+vw

yujin0213的博客

08-23

1552

前言对于做移动端开发的同学来说，rem这个单位并不陌生。通常我们做移动端适配，主流的方案大致有两种淘宝flexible.js 计算设备像素比，dpr=物理像素/css像素根据设备像素比，将页面宽乘以设备像素比，然后去计算rem，这样页面所有元素都会是正常的2倍然后通过meta标签的viewport对页面进行缩放，使得页面恢复正常根html的font-size值 = 屏幕宽度*设备像素比/10 以iphone6 375为例，1rem = 375 * 2 / 10 = 75px 然后在项目里写

Vue在移动端基于rem适配实现思路及过程

qq_49896911的博客

06-21

1038

vue，vant，移动端适配

remLayout:移动端基于rem布局的demo页

06-21

移动端基于rem布局的demo页页面布局计算的时候,比如设计稿为640px的宽度,那么计算的基数就是640/16=40px 一个banner宽度为640px的时候,对应的rem单位就是 16rem,无需考虑移动端各种屏幕大小需要注意的是当像素在...

【手淘自适应】rem+webpack实现移动端自适应布局的思路

waht的博客

08-21

1195

开始之前先粗略讲一下各种概念，如果要深入理解可以谷歌关键词到处逛逛。如果对这些概念了如指掌，那就可以直接拉到第二块二、实现自适应布局区域。一、各类名词概念 1、各类像素（1）物理像素(dp —— device pixels) 概念说人话就是屏幕上每一颗最小发光点就是1个物理像素。ppi（每英寸像素量）是屏幕像素密度的单位，像素密度越大，屏幕显示细节就能更多，画质更加细腻，文本更加清晰。。...

移动端页面开发适配 rem布局原理

风中追风

03-19

4894

我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)

移动端布局(三) rem布局及原理

androidioskl的博客

02-17

1万+

什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。 s1、s2、s5、s6的font-size和line-height分别是多少px? <div class="p1"> <div class="s1">1</div> <div class="s2">1</div> </div> <div class="p2">

移动端响应rem dpr viewport设置

running_shuai的博客

07-24

1357

(function () { var t; function initHtmlFont(){ var maxWidth = 640; var html = document.documentElement; var windowWidth = html.clientWidth;

移动端的几种适配方案及rem dpr px font-size之间转换理解

weixin_43797908的博客

08-09

3092

前端开发中，需要在各种不同屏幕尺寸大小的设备上运行页面，所以就需要进行移动端适配一般有一下几种方法：（）媒体查询media：代码冗余（）百分比布局：图片之类的会乱（）弹性布局flex:高度固定，宽度自适应，天猫用的这玩意（）rem+viewport：这个计算比较复杂，淘宝用的就是这玩意 rem是什么？ 移动端布局用的最多的就是rem啦，rem就是相对元素根节点的字体大小的单位，其实就是一个相对单位，或者一个比例相对的就是这个font-size，也就是整个html设置的fon...

dpr（设备像素比）与 移动端适配

qq_15972061的博客

09-29

2402

在上一篇文章中（使用 rem 实现移动端的自适应布局），我们讲到 iphone6s 的屏幕宽度为 375px，我们拿到的视觉稿也是基于iphone6s 设计的，但是设计稿的宽度却是 750px，这是为什么呢？原因就是 iphone6s 的屏幕 dpr = 2，首先我们先理解 3 个概念：物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在...

移动适配（rem/px）

daisy_lisixi的博客

09-01

804

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

【移动端】基于rem实现手机端页面自适应--动态改变dpr和font-size

季诗筱的博客

04-26

6469

这两天还是在写手机端的那个表单页面，我好苦恼啊。明明在chrome上调试的时候都是可以的，但是真的用手机去扫码看的时候，就出现问题了。苹果手机么有问题，都是根据dpr来设置meta标签，动态设置font-size，显示的跟预期的一样。用三星手机扫也是可以的，但是当我用小米4扫的时候，就有问题了。表单宽度和高度都有所缩小，内容显示不全。我搜了一下，网上有说米4的dpr也是3. 于是我就自己

使用 rem 布局的优缺点？

liuhao9999的博客

03-23

3325

优点：在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。缺点：（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（2）使用iframe引用也会出现问题。（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。 ...

详解rem布局-利用rem布局实现移动端高清显示