px转换rem自适应手机样式

简介: / px转换remvar IntervalId = 0;window.onload = function() { IntervalId = self.
/ px转换rem
var IntervalId  = 0;
window.onload = function() {
    IntervalId = self.setInterval("RemCount()", 100);
};
function RemCount() {
    var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (ClientWidth < 10) {
        return;
    }
    var viewport = document.querySelector("meta[name=viewport]");
    if (window.devicePixelRatio == 1) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
    }
    if (window.devicePixelRatio == 2) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
    }
    if (window.devicePixelRatio == 3) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
    }
    // 1rem = 10rem 默认最低比例为1:16,如果低于此比例会强制使用1:16,从而引起高度的巨大问题(自行测试)
    var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (ClientWidth > 0) {
        localStorage.ClientWidth = ClientWidth;
    } else {
        ClientWidth = localStorage.ClientWidth;
    }
    document.documentElement.style.fontSize = ClientWidth / 7.5 + 'px';
    console.log("PHP页提示,宽度及rem比例:" + ClientWidth + " / " + (ClientWidth/7.5));
    if (ClientWidth > 0) {
        window.clearInterval(IntervalId);
    }
}
AI 代码解读
目录
打赏
0
0
0
0
207
分享
相关文章
自适应手机端青蛙吃蚊子小游戏html源码
HTML5青蛙吃蚊子游戏源码分享,音乐可以改的,自己在目录替换一下音乐就可以了训练手速和眼力的时候到了!
66 0
自适应手机端青蛙吃蚊子小游戏html源码
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
WordPress轻拟物博客主题niRvana 4.5.3(自适应手机端)
WordPress轻拟物主题niRvana,设计上不再趋从于现有的扁平风,我认为是时候从极致的扁平稍微向拟物致敬了,因此采用了轻拟物的风格。niRvana 设计和样式更加新颖,一眼看上去就会被他吸引住,主题配色也非常舒服。而且它有两个功能特别有意思,一个是自动根据文章特色图片识别出图片的主色调,在首页、文章分类页用最美的方式显示滚动图片,另一个则是文章支持语音朗读。主题细腻有质感,手机端体验非常好。
108 2
|
9月前
|
PHP
驾校在线考试系统源码 手机+PC+平板自适应
Thinkphp在线考题源码 驾校在线考试系统 手机+PC+平板 自适应,机动车驾驶培训学校驾校类网站源码带手机端 运行环境:php+mysql
223 11
驾校在线考试系统源码 手机+PC+平板自适应
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
123 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
前端切图:手机端自适应布局demo
前端切图:手机端自适应布局demo
50 0
手机端自适应布局demo
手机端自适应布局demo
58 0
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
254 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    164
  • 2
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    4
  • 3
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
    20
  • 4
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    18
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    5
  • 6
    算法系统协同优化,vivo与港中文推出BlueLM-V-3B,手机秒变多模态AI专家
    15
  • 7
    Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
    77
  • 8
    OmAgent:轻松构建在终端设备上运行的 AI 应用,赋能手机、穿戴设备、摄像头等多种设备
    26
  • 9
    HTML5实现的手机验证抽奖领券效果源码
    2
  • 10
    ClKLog支持手机端查询统计数据啦!
    2
  • 1
    算法系统协同优化,vivo与港中文推出BlueLM-V-3B,手机秒变多模态AI专家
    29
  • 2
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    49
  • 3
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    33
  • 4
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    131
  • 5
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
    98
  • 6
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    1439
  • 7
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    36
  • 8
    ClKLog支持手机端查询统计数据啦!
    44
  • 9
    OmAgent:轻松构建在终端设备上运行的 AI 应用,赋能手机、穿戴设备、摄像头等多种设备
    271
  • 10
    Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
    435