简单rem.js代码

本文介绍了rem布局在响应式设计中的应用,通过一个简单的rem.js代码示例,阐述了如何调整网页元素尺寸,实现不同设备上的适配,提高用户体验。
摘要由CSDN通过智能技术生成

在这里插入代码片

window.onload = function(){
    /*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
      为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(1940,100)
};
window.onresize = function(){
    getRem(1940,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}
(function() {
  // 是否是移动端地址
  var pathname = window.location.pathname;
  var isMobileUrl = "/mobile" == pathname.substring(0, 7);
  // 是否是移动端
  var sUserAgent = navigator.userAgent.toLowerCase();
  var isMobileClient = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent);
  // 处理rem适配
  if (isMobileUrl) {
    px2Rem(375, 750);
  } else {
    px2Re
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值