vw+vh+rem响应式布局
科普下:
平时很少用的css单位:
1.长度单位:
rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;
vw:相对于视口的宽度。视口被均分为100单位的vw;
vh:相对于视口的高度。视口被均分为100单位的vh;
vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
ch:数字0的宽度;
2.角度单位(transform用到的比较多)
deg:度(Degress)。一个圆共360度;
grad:梯度(Gradians)。一个圆共400梯度;
rad:弧度(Radians)。一个圆共2π弧度;
turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;
视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以解决各种屏幕适配问题!
vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配)
vw + vh + rem布局首先还是
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其次:直接上代码
<template> <div class="mobile_box"> <h1>移动端测试布局使用vw+vh+rem</h1> <div class="test_port"> <p>测试视口</p> </div> </div> </template> <script> export default { data() { return { } }, methods: { } } </script> <style scoped> .test_port { width: 30vw; height: 50vh; line-height: 50vh;/*讲白了就是可视窗口宽高单位 + 字体用rem等比缩放*/ font-size: 1rem; text-align: center; font-weight: bold; border:1px dashed #ccc; background-color: rgba(255, 255, 255, 0.8); } h1 { text-align: center; } </style>
总结:代码这样的东西没必要完全按照别人的来,怎么合适怎么方便怎么效率好怎么来咯。
另外附上媒体查询@media
@media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; }
转自:https://www.cnblogs.com/lhl66/p/9475531.html