关于设备转向后的自适应
Files & media
date
Jul 27, 2016
slug
css-rem-and-javascript
status
Published
tags
develop
summary
关于移动端的适配，都知道其实rem是比较好的一个适配方案，但是rem是根据根目录的字体大小来调解的，那么，我们在做网页的时候，屏幕旋转后，能否让根目录的字体跟着变化呢？
type
Post
URL
关于移动端的适配，都知道其实rem是比较好的一个适配方案，但是rem是根据根目录的字体大小来调解的，那么，我们在做网页的时候，屏幕旋转后，能否让根目录的字体跟着变化呢？
先上代码：
$(function(){
var size = $(window).width() / 25;
$('html').css('font-size': size);
});
这样在css中用rem单位是没什么问题，但是如果屏幕旋转之后，你就会发现，真的不能看了就。原因就是屏幕旋转以后，根上的字体并没有随之变化。
所以我们来加上
// 监视设备方向
window.addEventListener("orientationchange",function() {
media();
},false);
functionmedia(argument) {
// 因为获取尺寸出错，需要延迟获取
setTimeout(function(){
var size = $(window).width() / 25;
console.log('the device size: '+size);
$('html').css('font-size', size);
}, 200);
}