html {
/* 将屏幕整个宽度设置为24rem,从而自动实现内容按照屏幕的大小进行缩放 */
/* 屏幕大小比例 16:9 */
font-size: calc(100vw / 24);
}
body {
font-size: 0.12rem;
width: 100vw;
height: calc(100vw / 16 * 9);
}
*{
padding: 0rem;
margin: 0rem;
}
3、px 与 rem 的选择?
16px=1rem
1920*1080=16:9 (屏幕大小比例)
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
4、vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度,1vw等于1/100
的视口宽度,比如:浏览器高度900px,宽度为750px,
1vh=900px/100=9px,1vw = 750px/100=7.5px;很容易实现与同屏幕等高的框。
最后
以上就是自信可乐最近收集整理的关于vue大屏可视化布局的全部内容,更多相关vue大屏可视化布局内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复