调整页面百分比
不会写页面响应式的同学,可以直接拿去用!!!这里的1920,可以改为psd页面原有尺寸680或者720,这样就不用整个页面手动计算百分比啦!
1 2 <script type="text/javascript"> 3 function bodyScale() { 4 var devicewidth = document.documentElement.clientWidth; 5 var scale = devicewidth / 1920; 6 document.body.style.zoom = scale; 7 } 8 window.onload = window.onresize = function() { 9 bodyScale(); 10 } 11 </script>
手机端使用页面百分比往往会出现,pc端放太大会很模糊,有些同学就想让手机移动端百分比响应,然后当在pc端的时候能够不要放大,在屏幕中间正常显示页面,那么就需要用js来获取屏幕宽度来处理多媒体。
/页面百分比宽度自适应 var result = window.matchMedia('(min-width:1200px)'); var result2 = window.matchMedia('(min-width:992px)'); var result3 = window.matchMedia('(min-width:768px)'); if (result.matches) { console.log("大屏幕(>=1200)"); } else if (result2.matches) { console.log("中等屏幕(>=992&<=1200)"); } else if (result3.matches) { console.log("小屏幕(>=768&<=992)"); } else { function bodyScale() { var devicewidth = document.documentElement.clientWidth; var scale = devicewidth / 640; document.body.style.zoom = scale; } window.onload = window.onresize = function() { bodyScale(); } console.log("超小屏幕(<=768)"); } //窗体大小改变自动刷新页面 $(window).resize(function() { console.log("窗体大小改变了!"); location.reload(true); });
人还是要有梦想的,万一实现了呢!