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 发生变化。
|
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