CSS_JS_Tips

工作中遇到的CSS问题或JS技巧rem计算rem等比缩小放样方案1@mediascreenand(min-width:320px){html{font-size:50px;}}@mediascreenand(min-width:360px){html{font-size:56.25px;}}@mediascreenand(min-width:375px){html{font-size:58.59375px;}}@mediascreenand(min-宽度：400px){html{font-size:62.5px;}}@mediascreenand(min-width:414px){html{font-size:64.6875px;}}@mediascreenand(min-width:440px){html{font-size:68.75px;}}@mediascreenand(min-width:480px){html{font-size:75px;}}@mediascreenand(min-width:520px){html{font-大小：81.25px；}}@media屏幕和（最小宽度：560px）{html{font-size：87.5px；}}@media屏幕和（最小宽度：600px）{html{font-size：93.75px;}}@media屏幕和（最小宽度：640px）{html{font-size:100px;}}@media屏幕和（最小宽度：680px）{html{font-size:106.25px;}}@media屏幕和（最小宽度：720px）{html{font-size:112.5px;}}@media屏幕和（最小宽度：760px）{html{font-size:118.75px;}}@media屏幕和（min-宽度：800px){html{font-size:125px;}}@mediascreenand(min-width:960px){html{font-size:150px;}}方案2@mediascreenand(min-width:320px){html{font-size:312.5%;}}@mediascreenand(min-width:360px){html{font-size:351.5625%;}}@mediascreenand(min-width:375px){html{font-size:366.211%;}}@mediascreenand(min-width:400px){html{font-size:390.625%;}}@mediascreenand(min-width:414px){html{font-size:404.2969%;}}@mediascreenand(min-width:440px){html{font-size:429.6875%;}}@mediascreenand(min-width:480px){html{font-size:468.75%;}}@mediascreenand(min-width:520px){html{font-size:507.8125%;}}@mediascreenand(min-width:560px){html{font-size:546.875%;}}@mediascreenand(min-width:600px){html{font-size:585.9375%;}}@mediascreenand(min-width:640px){html{font-size:625%;}}@mediascreenand(min-宽度：680px){html{font-size:664.0625%;}}@mediascreenand(min-width:720px){html{font-size:703.125%;}}@mediascreenand(min-width:760px){html{font-size:742.1875%;}}@mediascreenand(min-width:800px){html{font-size:781.25%;}}@mediascreenand(min-width:960px){html{font-size:937.5%;}}方案3vardesignWidth=640,rem2px=100;document.documentElement.style.fontSize=((window.innerWidth/designWidth)*rem2px)+'px';方案4vardesignWidth=640,rem2px=100;document.documentElement.style.fontSize=((((window.innerWidth/designWidth)*rem2px)/16)*100)+'%';居中方法绝对与tranform.parent{position:relative;}.child{position:absolute;左：50%；顶部：50%；transform:translate(-50%,-50%);}flex.parent{显示：flex;证明内容：居中；align-items:center;}具有定位值的绝对值。父母{位置：绝对;左：0；右：0；顶部：0；bottom:0;}文本换行。word-wrap{word-break:break-all;overflow:auto;}移动端1px问题div:after{content:"";位置：绝对；左：0；顶部：0；右：0；高度：1px；边框顶部：1pxsolid#D9D9D9；颜色：#D9D9D9；-webkit-transform-origin:00;-ms-transform-origin:00;变换原点：00；-webkit-transform:scaleY(0.5);：规模Y（0.5）；transform:scaleY(0.5);}iOS部分使用弹性滚动效果iOS自带的全局滚动有内置弹性滚动，但是局部滚动没有iOS启动局部滚动并使用弹性滚动效果body{-webkit-overflow-scrolling:touch;}/*局部滚动domnode*/.scroll-el{overflow:auto;}将属性挂在body上可以避免很多奇怪的越界bug。什么情况下会触发越界？当全局滚动滚动到页面顶部（或底部）并继续向下（向上）滑动时，就会出现局部滚动。出现iOS解决方案：部分滚动：使用ScrollFix组件核心代码：if(startTopScroll<=0){elem.scrollTop=1}if(startTopScroll+elem.offsetHeight>=elem.scrollheight){elem.scrollTop=elem.scrollheight-elem.offsetHeight-1}注意：页面固定区域禁止touchmove默认事件android使用partialundong，会导致滚动条显示异常，滚动不流畅。Android下，推荐只使用全局滚动来平滑滚动页面。添加-webkit-overflow-scorlling:touch到iOS的主体。尝试使用部分滚动。iOS引入了ScrollFix来避免越界。Android下尽量使用全局滚动，尽量不要overflow:auto使用min-height:100%而不是height:100%iOS下有滚动条和position:absolute的节点不要设置背景色。输入唤起纯数字软键盘。使用input的type属性来唤起纯数字软键盘。其他pattern属性值不支持自定义软键盘关闭首字母大写的行为：配置input的autocapitalizenode,autocorrect属性自动将输入的英文用户名首字母大写//关闭autocapitalize="off"autocorrect属性值首字母大写的效果:重复特殊字符newArray(num).join('*')//重复num*JS全数组递归方法：functionpremutate(str){varresult=[]if(str.length>1){varleft=str[0]varrest=str.slice(1,str.length)varpreResult=premutate(rest)for(vari=0;i{(FastClickasany).attach(document.body)},false,)}导入和导出Node方式导入对应导出一个JavaScript文件，可以向外xprots有无数的变量、函数、对象，但是在require();的时候，只需要加载一次JS文件。因此，在不可见之后，会增加一个顶级命名空间。导入一个空模块就是一个空对象，一个模块就是一个对象。导出方法：exports，导出整个公式module.exports，导出赋值部分导入方法：reuire()//导出一个变量exports.a=10;//导入变量letb=require('./export')//导入形式`console.log(b)`输出导入值：//{a:10}//导出一个变量，直接需要变量值即可使用。//module.exports='名称';//导入变量letb=require('./export')//导入表单`console.log(b)`输出导入值：//name//导出对象module.exports={name1:123,name2:456}//导入变量letb=require('./export')//导入的形式`console.log(b)`输出导入的值：//{name1:123,name2:456}//导出objectexports.msg={name1:1,name2:2}//导入这个变量letb=require('./export')//导入的形式`console.log(b)`输出导入的值：//{msg:{name1:1,name2:2}}//导出函数exports.showMsg=function(){}//导入这个变量//letb=require('./export')//导入表单`console.log(b)`输出导入值：//{showMsg:[Function]}//引用结果需要通过变量引用对象执行//varb=require();//b.showMsg();//导出函数module.exports=function(){}//导入变量letb=require('./export')//导入的形式`console.log(b)`输出导入的值：//[Function]//导入文件的变量直接执行对象，函数常用的export方法：module.exportsES6和Typescriptimport对应的export和export：exportimport:import注意：导出和导入，除了使用as，变量名是一样的导出一个文件，默认是一个空对象直接使用导入文件定义变量名，直接执行默认导出，即可导入时取任何变量名为exportdefault的默认导出模块不能使用{}objectexport//导出常量exportconstfoo=Math.sqrt(2)//importimport{foo}from'./export'functionmyFunction(){}//exportalreadyDeclaredfunctionexport{myFunction}importimport{myFunction}from'./export'//多次导出exportfunctioncube(x:number):number{returnx*x*x}constfoo:number=Math.PI*Math.sqrt(2)export{foo}//exportmultiple//importimport{cube,foo}from'./export'//导出函数exportdefaultfunction(){}exportdefaultfunctionfun(){}//importimportmyFunctionfrom'./export'//可以取任何变量名//如果导出默认，定义函数名或变量名lename,orclassname//导入的时候可以写和原来一样的名字，也可以取任意变量名//exportclassexportdefaultclass{}//importimportTestfrom'./export'afile(module)默认只能有一个export，可以是类，函数，对象等。导入整个模块的内容，在当前范围内插入导出变量，包括导出文件中的所有导出绑定（包括导出default)//导出多个模块exportfunctionquery(){}exportfunctionupdate(){}//importimport*asAPIfrom'./export'导入整个模块作为附加功能，但不导入模块的导出成员：import'my-module'showsallDOMborders[].forEach.call($$("*"),dom=>{dom.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16);});