rem如何实现自适应

Posted 2020-10-27 dai-summary

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem如何实现自适应相关的知识，希望对你有一定的参考价值。

此文代码，皆为转发，尚未测过

rem是相对于根元素<html>，所以只需要在根元素确定一个px字号，就可以算出元素的宽高

假设rem的html font-size用16px。

750px的设计图以375px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/16px = 3.125rem。

假如用的是rem单位，动态计算font-size值。计算方式如下：

var baseSize = 50, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //这个就是动态font-size值

有一点没有说的是，这个计算公式是viewport设置initial-scale=1的情况，如果是其他缩放比例，那就需要乘以这个缩放比例。

写一个数组去重的方法

/** 方法一：
 * 1.构建一个新的数组存放结果
 * 2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比
 * 3.若结果数组中没有该元素，则存到结果数组中
 * 缺陷：不能去重数组中得引用类型的值和NaN
*/
function unique(array){
  var result = [];
  for(var i = 0;i < array.length; i++){
    if(result.indexOf(array[i]) == -1) {
      result.push(array[i]);
    }
  }
  return result;
}

// [1,2,1,2,‘1‘,‘2‘,0,‘1‘,‘你好‘,‘1‘,‘你好‘,NaN,NaN] => [1, 2, "1", "2", 0, "你好",NaN,NaN]
// [{id: ‘1‘}, {id: ‘1‘}] => [{id: ‘1‘}, {id: ‘1‘}]

写一个方法，将URL中的查询字符串解析成一个字典对象

var path = ‘www.u.com/home?id=2&type=0&dtype=-1‘;

function parseUrl(url) {
  var result = [];
  var tmp = (url.split(‘?‘))[1];
  var tmpArr = tmp.split(‘&‘);
  tmpArr.map(function(v, k) {
    var value, key;
    var obj = {};
    key = (v.split(‘=‘))[0];
    value = (v.split(‘=‘))[1];
    obj[key] = value;
    result.push(obj)
  })
  
  return result;
}

console.log(parseUrl(path)); //[{id: ‘2‘},{type: ‘0‘},{dtype: ‘-1‘}]



//功能：获取url中的参数的值
function UrlSearch(url) {
  var name,value;
  var str = url; //取得整个地址栏
  var num = str.indexOf("?");
  str = str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

  var arr=str.split("&"); //各个参数放到数组里
  for(var i=0;i < arr.length;i++){
    num = arr[i].indexOf("=");
    if(num>0){
      name=arr[i].substring(0,num);
      value=arr[i].substr(num+1);
      this[name]=value;
    }
  }
}

// 测试
var path = ‘www.u.com/home?id=2&type=0&dtype=-1‘;
var Request= new UrlSearch(path); //实例化
console.log(Request); //[{dtype: ‘-1‘},{id: ‘2‘},{type: ‘0‘}]
var nickname = encodeURIComponent(Request.dtype);
console.log(nickname); //-1



//功能：修改url参数值
function changeURLArg(url,arg,arg_val){
  var pattern=arg+‘=([^&]*)‘;
  var replaceText=arg+‘=‘+arg_val;
  if(url.match(pattern)){
    var tmp=‘/(‘+ arg+‘=)([^&]*)/gi‘;
    tmp=url.replace(eval(tmp),replaceText);
    return tmp;
  }else{
    if(url.match(‘[\\?]‘)){
      return url+‘&‘+replaceText;
    }else{
      return url+‘?‘+replaceText;
    }
  }
  return url+‘\\n‘+arg+‘\\n‘+arg_val;
}

var path = ‘www.u.com/home?id=2&type=0&dtype=-1‘;
console.log(changeURLArg(path,‘type‘,4)); //"www.u.com/home?id=2&type=4&dtype=4"

为了能在app上观看，先发布了，有不妥之处请见谅

http://caibaojian.com/web-app-rem.html

https://www.cnblogs.com/lovesong/p/5439756.html

https://segmentfault.com/a/1190000010384519

以上是关于rem如何实现自适应的主要内容，如果未能解决你的问题，请参考以下文章