HTML的dpr

HTML的dpr只是为了自己以后查找方便 看不懂勿怪 DPI PPI 屏幕像素密度或屏幕每英寸的像素数量 dips 手机尺寸或独立像素物理像素 手机分辨率 dpr nbsp window devicePixelR js 可以拿到 css 定义 psd 转换 rem 单位 rem px 基准值基准值 手机宽高 dpr 10 乘以 dpr 是因为页面有可能缩放除以 10 是为了取整

只是为了自己以后查找方便,看不懂勿怪

DPI、PPI:屏幕像素密度或屏幕每英寸的像素数量

dips:手机尺寸或独立像素

物理像素 = 手机分辨率

dpr = window.devicePixelRatio(js可以拿到)

css定义

psd转换rem单位

rem = px / 基准值

基准值 = 手机宽高 * dpr / 10

乘以dpr是因为页面有可能缩放

除以10是为了取整,方便计算(可以是任何值)

以下是js设置meta的缩放和font-size

var dpr, rem, scale; 
var docEl  = document.documentElement; 
var fontEl = document.createElement('style'); 
var metaEl = document.querySelector('meta[name="viewport"]'); 
dpr = window.devicePixelRatio || 1;
scale = 1 / dpr; 
rem = docEl.clientWidth * dpr / 10; 
// 设置viewport,进行缩放,达到高清效果 
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); 
// 设置data-dpr属性,留作的css hack之用 
docEl.setAttribute('data-dpr', dpr); 
// 动态写入样式 
docEl.firstElementChild.appendChild(fontEl); 
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 
// 给js调用的,某一dpr下rem和px之间的转换函数 
window.rem2px = function(v) { 
 v = parseFloat(v);   return v * rem;  };  window.px2rem = function(v) {   v = parseFloat(v);   return v / rem;  }; window.dpr = dpr;  window.rem = rem;



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/232677.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 高通平台8953 Linux DTS(Device Tree Source)设备树详解之三(高通MSM8953 android7.1实例分析篇)[通俗易懂]

    高通平台8953 Linux DTS(Device Tree Source)设备树详解之三(高通MSM8953 android7.1实例分析篇)[通俗易懂]高通平台8953 LinuxDTS(DeviceTreeSource)设备树详解之三(高通MSM8953android7.1实例分析篇)本系列导航:高通平台8953 LinuxDTS(DeviceTreeSource)设备树详解之一(背景基础知识篇)高通平台8953 LinuxDTS(DeviceTreeSource)设备树详解之二(DTS设备树匹配过程)高通平台8953 L…

    2022年10月18日
    3
  • cdn必须备案吗_没备案域名cdn加速

    cdn必须备案吗_没备案域名cdn加速随着互联网行业的快速发展,人们可以通过网络知道很多事情,上网早已成为了一件很普通的事情。近年来,随着网络技术的发达,也出现了不少智能虚拟网络,比如CDN加速服务,它可以让用户能够更好的获取内容。那么,CDN加速是如何使用的?需要备案吗?下面就让摩杜云来跟大家详细的介绍一下。CDN加速是如何使用的?要知道,CDN加速服务是要收费的,大家在注册域名的时候可以在摩杜云官网上找到这项服务,可以免费试用。而CDN加速的使用方法也是很简单的,现在市面上的各大域名服务商都为用户体用了CDN加速服务,在域名服务商找到C

    2025年8月26日
    7
  • vue跨域解决方案 简书_springboot允许跨域

    vue跨域解决方案 简书_springboot允许跨域一:为什么会出现跨域问题?出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。二:什么是跨域?当一个请求url的协议、域

    2022年9月16日
    3
  • 回溯法 0-1背包问题

    回溯法 0-1背包问题一.回溯法回溯法采用的是深度优先策略,回溯法按深度优先策略搜索问题的解空间树。首先从根节点出发搜索解空间树,当算法搜索至解空间树的某一节点时,先利用剪枝函数判断该节点是否可行(即能得到问题的解)。如

    2022年7月2日
    29
  • Lombok插件的安装和使用「建议收藏」

    Lombok插件的安装和使用「建议收藏」IDEA中安装Lombok插件打开IDEA的Setting–>选择Plugins选项–>选择Browserepositories–>搜索lombok–>点击安装–>安装完成重启IDEA–>安装成功后重启IDEA引入lombok的jar包<dependency&

    2025年9月7日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号