您的位置：首页 > 其它

rem布局进阶

2017-03-30 09:02 148 查看 
<script>!function(e){functiont(a){if(i[a])returni[a].exports;varn=i[a]={exports:{},id:a,loaded:!1};returne[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}vari={};returnt.m=e,t.c=i,t.p="",t(0)}([function(e,t){"usestrict";Object.defineProperty(t,"__esModule",{value:!0});vari=window;t["default"]=i.flex=function(e,t){vara=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);varu=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);flex(100,1);</script>

该方案使用相当简单，把这段原生JS放到HTML的head标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

代码原理
这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）动态设置html的font-size,同时根据设备DPR调整页面的缩放值，进而达到高清效果。

有何优势
引用简单，布局简便

根据设备屏幕的DPR,自动设置最合适的高清缩放。

保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）

有效解决移动端真实1px问题（这里的1px是设备屏幕上的物理像素）

如何使用
重要的事情说三遍！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
看过《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，
此方案也是默认1rem=100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长55px,宽37px，那你直接可以这样写样式：

.myBtn{
width:0.55rem;
height:0.37rem;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航