px转换rem自适应手机样式-阿里云开发者社区

开发者社区> php的小菜鸟> 正文

px转换rem自适应手机样式

简介: / px转换rem var 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);
    }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
listview中item改变默认点击样式
引用:http://uuubd.iteye.com/blog/1485666 listview中的item们默认点击后变成黄颜色,这次我们自定义该样式,将背景色改为绿色 在drawable下新建一个customer.
624 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8633 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10459 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11938 0
打印分页css样式,style="page-break-after:always;"
style="page-break-after:always;" 今天客人反映说IE7打印不到Receipt内容,打印出来是空白的,而IE8下没有问题。
750 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12272 0
去掉IE10、IE11的默认文本框样式
在IE 10+的浏览器上,输入框在输入的时候会出现图上的效果,为了保持样式统一,需要去掉这些浏览器默认样式。 input::-ms-clear { display: none;} input::-ms-reveal { display:...
715 0
+关注
php的小菜鸟
热爱编程,忠于开源的小码农
90
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载