移动端适配（基于实现）

html为50px；1rem可以作为50px得到（html分为100rem）那么：1.25rem的方框宽度可以作为(50*1.25)px得到@Media实现html的fontSize设置@charset"UTF-8"；@mixinqueryWidth($min,$max){@if$min==-1{@mediascreenand(max-width:$max+px){html{字体大小:(($max+1)/375)*100像素;}}}@elseif$max==-1{@mediascreenand(min-width:$min+px){html{字体大小:($min/375)*100px;}}}@else{@mediascreenand(min-width:$min+px)and(max-width:$max+px){html{字体大小:($min/375)*100px;}}}}@includequeryWidth(-1,319);//对于iphone4@includequeryWidth(320,359);//对于iphone5@includequeryWidthth(360,374);@includequeryWidth(375,383);//对于iphone6@includequeryWidth(384,399);@includequeryWidth(400,413);@includequeryWidth(414,-1);//foriphone6plus纯css实现htmlfontSize设置移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vwunit和calc()可以脱离JS的控制/*基于UIwidth=750pxpagewithDPR=2*/html{font-size:calc(100vw/7.5);}jq实现html的fontSize设置（大屏保存为100px）$(window).resize(infinite);无穷（）;functioninfinite(){varhtmlWidth=$('html').width();如果(htmlWidth>750){$("html").css({"font-size":"100px"});}else{$("html").css({"字体大小":100/750*htmlWidth+"px"});}}#body标签宽度：7.5rem；阿里flexible实现html设置的fontSizenpmi-S经过amfe-flexiblevw适配（百分比适配）配置后，直接css写px会自动解析成vw#安装postcss-px-to-viewport:npminstallpostcss-px-to-viewport--save#postcss.config。js配置：module.exports={plugins:{autoprefixer:{},"postcss-px-to-viewport":{viewportWidth:375,//窗口的宽度，对应我们设计稿的宽度，Iphone6一般为375(xx/375*100vw)viewportHeight:667,//窗口的高度，Iphone6一般为667unitPrecision:3,//指定`px`转换为窗口单位值的小数位数（很多情况下不能整除）viewportUnit:"vw",//指定转换为的窗口单位,推荐使用vwselectorBlackList:['.ignore','.hairlines'],//指定不转换为窗口单位的类，可以自定义，可以无限添加，推荐定义一个或者两个常用类名minPixelValue:1,//小于或等于`1px`不转换为窗口单位，你也可以设置成你想要的值mediaQuery:false//允许在媒体查询中转换`px`}}}相关博文https://www.cnblogs.com/azhai...