关于设备转向后的自适应

关于移动端的适配,都知道其实 rem 是比较好的一个适配方案,但是 rem 是根据根目录的字体大小来调解的,那么,我们在做网页的时候,屏幕旋转后,能否让根目录的字体跟着变化呢?

先上代码:

1
2
3
4
$(function(){
var size = $(window).width() / 25;
$('html').css('font-size': size);
});

这样在 css 中用 rem 单位是没什么问题,但是如果屏幕旋转之后,你就会发现,真的不能看了就。原因就是屏幕旋转以后,根上的字体并没有随之变化。

所以我们来加上

1
2
3
4
5
6
7
8
9
10
11
12
13
// 监视设备方向
window.addEventListener("orientationchange", function() {
media();
}, false);

function media(argument) {
// 因为获取尺寸出错,需要延迟获取
setTimeout(function(){
var size = $(window).width() / 25;
console.log('the device size: '+size);
$('html').css('font-size', size);
}, 200);
}

关于设备转向后的自适应

https://hivan.me/css-rem-and-javascript/

作者

Hivan Du

发布于

2016-07-27

更新于

2024-01-16

许可协议

评论