当前位置: 首页 > Web前端 > CSS

基于vw单元的移动端适配方案学习笔记

时间:2023-03-30 14:48:47 CSS

基于VW单元学习笔记回顾总结一些移动端适配的知识。先决条件需要在“head”中添加“meta”兼容性,ie9+(ie8让它自己玩)计算html的“font-size”//设计稿的宽度,750|640|520vardesignWith=750//设计稿上的1px对应设备上vw的多少个单位,100vw表示设备屏幕的宽度varvw=100/designWith//html的font-size的大小//它也是尺寸单位rem//为方便后续尺寸计算,放大100倍,即设计稿上的100px;varfontSize=100*vw//设置html的font-size,可以直接写在css中的document.getElementsByTagName("html")[0]中。style.fontSize=fontSize+"vw"使用设计稿上元素的大小(px):eleWidth.ele{width:(eleWidth/100)rem;}code文档box01box02box03