Vue前端项目自适应布局
Vue前端项目自适应布局一、单位尺寸二、基于rem实现自适应布局一、单位尺寸px%vw、vh: 窗口em: 针对父元素的font-sizerem:“root em”的缩写,是一个相对长度单位;rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小。说明:谷歌浏览器,字体的默认大小是16px;如果父元素item1的font-size=5
·
Vue前端项目自适应布局
一、单位尺寸
- px
- %
- vw、vh: 窗口
- em: 针对父元素的font-size
- rem:“root em”的缩写,是一个相对长度单位;rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小。
说明:
谷歌浏览器,字体的默认大小是16px;
如果父元素item1的font-size=50px,那么子元素item2的1em=50px。
如果html的顶层font-size为20px; 那么子元素item2的1rem就为20px。
二、基于rem实现自适应布局
假设页面的根元素,font-size的大小没有设置,默认为16px。
经过设计,我们的页面主体部分宽为500px; 高为200px。要想转换为自适应布局,我们只需要将px转换为rem就可以。
转换后:
宽为:500/16rem
高为:200/16rem
详情见:
html5页面 的rem 布局适配方法
更多推荐
已为社区贡献2条内容
所有评论(0)