js

2024-07-16 20:48| 来源: 网络整理| 查看: 265

今晚我在写一个页面, 要求是在用户旋转屏幕的时候应用不同的样式,让网页更好地表现内容. 难点不在于根据横竖屏来设置不同的样式, 而是在于在用户旋转屏幕之后需要刷新一下才能应用新的样式, 这样贼麻烦.

因此今晚搞了两个小时, 终于实现在旋转屏幕的时候自动切换样式了

首先, 我写的这个页面在dom加载完成后会获取当前屏幕的宽度进行计算rem. 也就是说, 如果用户第一次打开这个网页是竖着看的时候, 是根据手机上的短边(屏幕宽度)来计算的.(通过设置html的font-size)

(function page_first() { //设置font-size 1rem = 10vw document.addEventListener('DOMContentLoaded', function() { document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'; }, false); }());

这里我设置为屏幕宽度=10rem, 这样子好计算

接下来, 我写了个@media的css样式, 设置了一下横屏和竖屏样式

@media screen and (orientation: portrait) { /* 竖屏样式 */ } @media screen and (orientation: landscape) { /* 横屏样式 */ }

那么这时候我就看了一下效果

结果是, 我竖屏的时候正常显示(是我要的效果), 当我切换横屏的时候, 还是竖屏的样式, 直到我刷新了

【本文地址】

js

js

今日新闻

推荐新闻