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的情况,如果是其他缩放比例,那就需要乘以这个缩放比例。

 js的ajax

 

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

如需将请求发送到服务器,使用 XMLHttpRequest 对象的 open() 和 send() 方法:
//get方法
xmlhttp.open(
"GET","ajax_info.txt",false);
//为防止浏览器缓存,可添加参数
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send(); xmlhttp.send();

//post方法

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:


xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
//async=true 时,该在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function() {


   if (xmlhttp.readyState==4 && xmlhttp.status==200){

     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

//如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,需使用 responseXML 属性:
  xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

  }
}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
 

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

下面是 XMLHttpRequest 对象的三个重要的属性:

属性描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未找到页面

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

写一个数组去重的方法

/** 方法一:
 * 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

posted @ 2018-03-18 20:45  笔记珊珊珊  阅读(237)  评论(0编辑  收藏  举报