根据dpr动态设置font-size

最新推荐文章于 2021-01-07 14:36:07 发布
最新推荐文章于 2021-01-07 14:36:07 发布
阅读量1.1k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38603437/article/details/102732644
版权
本文介绍了设备像素比（DPR）的概念，它定义了逻辑像素与物理像素的比例。当DPR为1:1, 1:2或1:3时，1px对应的pt值相应变化。在DPR为2或3时，为了保持视觉效果的一致性，需要将逻辑像素尺寸缩小2-3倍。通过示例展示了在不同DPR下应设置的逻辑像素大小，并提供了检查设备DPR的方法。" 56840603,5814064,数据库事务与隔离级别的详解,"['数据库理论', '事务管理', '并发事务']
摘要由CSDN通过智能技术生成

Dpr为逻辑像素和物理像素的像素比

1：1代表1px=1pt

1：2代表1px=2pt

1：3代表1px=3pt

dpr2-3时会将逻辑像素缩小2-3倍然后解析为物理像素呈现

以下图为例

 

 

Dpr:1下应设置的逻辑像素

 

Dpr:2下应设置的逻辑像素

最低0.47元/天 解锁文章
前端_小柒
关注
移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置
Jovan的博客
06-30 586
移动端适配，目前自己常用的两种 方案，参考以下两篇好文 方案一：使用lib-flexible包 使用flexible包方式，安装lib-flexible 包和 px2rem-loader包 npm install --save-dev lib-flexible px2rem-loader 在需要的js文件中头部引入，如果是vue项目就引入到main.js中： import 'lib-flexible' webpack配置loader，注意顺序很重要，顺序不对会出错 { test: /.
根据dpr设置html fontsize,如何为不同移动设备设置html不同的font-size？
weixin_39634508的博客
06-16 246
iPhone6的屏幕下1rem=50px或者用csshtml{font-size:calc(100vw / 7.5);}分割线抱歉，之前的那段js代码兼容性不是很好，包括那段css代码，只要在低版本的安卓手机上就会失效，找了很久找到一段代码分享一下，兼容性杠杠的(function(){var originWidthByDesign = 750 / 2;var originRootFontSize ...
前端新手——适配不同手机端页面的方案，动态查询dpr设置根元素font-size
chongpafu4072的博客
07-24 372
首先，说句题外话，博主只是个前端菜鸟，本片文章根据网上众多大神的文章+请教大神前辈+实践得出的一个总结。水平有限，说的不对的地方还请各位看官多多指教。 言归正传，最近博主的公司交给博主一项任务，搭建公司产品的wap页面，然后还是独立完成。再然后设计甩了一份适配ip6的设计图来，然后博主就开...
移动web开发之像素和DPR详解
热门推荐
开心大表哥
02-09 4万+
前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 　　 什么是像素： 　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...
微信小程序
gztrljh
10-02 893
小程序开发和学习一、小程序概念1.小程序是什么？2.小程序自己总结3.小程序与传统App区别4.小程序框架结构(mvvm)二、申请账号与登录设置 一、小程序概念 注：为了更好的学习小程序，建议先学习一下vue的基础再来 1.小程序是什么？ 它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。 2.小程序自己总结 不是HTML5 用即走，随手可得 拥有离线能力 一次开发，多端兼容 依赖微信客户端中(大树
不同设备屏幕尺寸和DPR适配
letterTiger的博客
08-09 8529
为什么需要适配 很久以前的手机的DPR都是1，这时候不需要做DPR适配，直接按照设计稿将页面画出来即可。但是自从技术的发展屏幕的升级出现了DPR为2为3甚至更高并且屏幕的尺寸也变得很多样化，这个时候如果不做适配会出一些问题，如图片模糊，不能实现真正的1px边框，同一个布局在不同尺寸下的表现不一致，如在375屏幕下是100px在414的屏幕下还是100px，这就有问题了，应该等比放大才对。 所以...
修改 flexible源码, 让iphone 6的750px宽度下，html的font-size为100px
水机.Threeki
05-27 750
事情起因 我看了手淘适配方案 flexible 的源码，然后自己使用了这个库后，再对比 手机淘宝 的代码 发现问题： 我的项目下 <html style="font-size: 37.5px;"> 而手机淘宝 <html style="font-size: 100px;"> 感情 github 上面的库是坑我呢吧？居然不一样？？？ 为什么要改？ 因为设计师大多数都是用iPhone7 的750px宽度做设计的 所以 750px 宽度下，font-size: 10
移动端适配rem+vw
yujin0213的博客
08-23 1378
前言 对于做移动端开发的同学来说，rem这个单位并不陌生。通常我们做移动端适配，主流的方案大致有两种 淘宝flexible.js 计算设备像素比，dpr=物理像素/css像素 根据设备像素比，将页面宽乘以设备像素比，然后去计算rem，这样页面所有元素都会是正常的2倍 然后通过meta标签的viewport对页面进行缩放，使得页面恢复正常 根html的font-size值 = 屏幕宽度*设备像素比/10 以iphone6 375为例，1rem = 375 * 2 / 10 = 75px 然后在项目里写
修改手淘方案flexiblejs不再根据dpr的多少来缩放使移动端自适应开发更方便
08-09
首先，理解flexible.js的核心原理：它会根据设备的DPR设置一个初始缩放比例（scale），然后通过设置html和body的font-size来间接调整页面元素的大小。这种方式在早期的移动设备上效果显著，因为它可以确保高DPR设备...
关于dpr的理解
weixin_30507269的博客
11-28 1263
做手机端项目，不可避免要寻找一个手机端页面与手机屏幕适配最佳方案。在这之前，我觉得还是要去理解一下dpr（设备像素比）。 我们还要了解一些与dpr相关的概念： (1)物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 如：iPhone6上就有750*1334个物理...
h5移动端适配
m0_37782372的博客
12-20 329
移动端自适应+浏览器兼容 使用postcss-px2rem 原理： 浏览器兼容 posscss会将本地的css预处理文件进行打包加上各种浏览器的前缀以做到浏览器兼容 px2rem 使用该插件后达到的效果是：按照视觉稿的像素值写css样式，且能做到不同设备的样式自适应。其原理是通过将你写的px转换为rem，并指定根元素的font-size与屏幕的比例与remUnit和视觉稿的比例相同，具体操作如下...
设备的dpr_dpr那些事
weixin_36455001的博客
01-07 3830
一、什么是dpr设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值举例：iPhone6的设备宽度是375px/设备独立像素(或css像素)，但是它一行有750个像素颗粒，dpr就是2。了解几个概念1.设备像素设备像素(device pixel)又称物理像素(physical pixel)，设备能控制显示的最小单位，我们可以把这些像素看作成显...
移动端适配：动态设置html元素的font-size（页面使用rem做单位）
winne雪
04-30 6352
一、前言： 首先我们要了解的知识点： 1.物理像素(physical pixel) 我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。 2.逻辑像素 是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 3.设备的像素比(device pixel ratio)简称DPR 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备...
移动 Web 适配：rem
jie1521836的博客
08-27 299
提到rem，大家首先会想到的是em，px，pt这类的词语，大多数人眼中这些单位是用于设置字体的大小的，没错这的确是用来设置字体大小的，但是对于rem来说它可以用来做移动端的响应式适配哦。 01兼容性 先看看兼容性，关于移动端 ios：6.1系统以上都支持 android：2.1系统以上都支持 大部分主流浏览器都支持，可以安心的往下看了。 02rem设置字体大小 re...
css3--rem
weixin_33829657的博客
08-29 85
DPR = 物理像素 / 逻辑像素 1.在JavaScript中，通过window.devicePixelRatio来获取2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webki...
移动端根据DPR设置展示的图片是2X还是3X
LzzMandy的博客
11-07 554
功能描述：当DPR=2，显示2X图片；当DPR=3，显示3X图片 实现方式： 1、dom结构 <div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span> &lt...
【移动端】基于rem实现手机端页面自适应--动态改变dpr和font-size
季诗筱的博客
04-26 6390
这两天还是在写手机端的那个表单页面，我好苦恼啊。明明在chrome上调试的时候都是可以的，但是真的用手机去扫码看的时候，就出现问题了。 苹果手机么有问题，都是根据dpr来设置meta标签，动态设置font-size，显示的跟预期的一样。用三星手机扫也是可以的，但是当我用小米4扫的时候，就有问题了。表单宽度和高度都有所缩小，内容显示不全。 我搜了一下，网上有说 米4的dpr也是3. 于是我就自己
手淘flexible.js框架适配移动端详解
手淘框架的工作原理是：根据设备的宽度和dpr，动态计算并设置`html`元素的`font-size`，所有尺寸以rem为单位的元素都会基于这个`font-size`进行缩放，从而实现响应式布局。例如，iPhone6的宽度为375pt，dpr为2，因此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值