目前比较常规的移动端适配方案有百分比适配和rem配置等两种方法,其中,百分比适配因其随着屏幕的大小进行缩放,但字体和一些东西并不会随着屏幕的放大而放大,所以是存在一些弊端的,这个时候,rem出现了,其基于html根元素进行放大的特性,使得页面中的内容可以随着屏幕的方法而适当放大,非常适合移动端的书写:
适配代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script> function defaultfont() { var sw = $(window).width(); var pw = 750; //var pw = 600; var f = 100 * sw / pw; if (sw > 767 && sw < 1000) { f = 70 } if (sw > 1000 && sw < 1200) { f = 100 } $('html').css({ 'fontSize': f + 'px', 'transtion': '0.35s' }) } setTimeout(function () { defaultfont() }, 100); var w_height = $(window).width(); $(window).resize(function () { if ($(window).width() != w_height) { setTimeout(function () { defaultfont() }, 100) } }); </script> |
7