响应式转vw规则

少锋 发布于:2022-09-02 07:43:27

vw转换计算规则

转换最大值为第一个输入框内的值,转换根据最大值转换的,所以转换的时候需要修改这个值


转换vw在1920到1200之间,需要根据wp选择转换的最大宽度,


规则

1、如果wp宽度大于1400转换统一从1920开始转换

@media only screen and (min-width: 1200px) and (max-width: 1920px) { }


2、要求1920大屏显示效果,网站上转换的时候,最大值选择1920,生成之后将 and (max-width: 1920px)删掉

@media only screen and (min-width: 1200px){ }


3、wp小于1400以下,转换原则遵从在1366的屏幕上让wp保持在1000左右,计算公式为 1366/1000 * wp宽度 。

例如wp宽度为1200 ,转换宽度为1200*1.366 = 1632,那么转换宽度应该为1600或者1500 左右,即网站上选择最大值为1500或者1600

wp宽度为1300,转换宽度为1300*1.366 = 1775,那么转换宽度应该为1700

wp宽度为1280,转换宽度为1280*1.366 = 1748,那么转换宽度应该为1700


4、wp小于1200的根据客户要求转换


5、转换值尽量为100的整数倍,计算出来的值向下计算求整不遵从四舍五入规则,例如1670 -> 1600


6、1366、1440屏幕上,需要看一下字体小于12的需要调整一下大小,保持二级标题 > 三级标题 > 正文

7、为兼容2k屏,4k屏,需要从1920转vw,之后把响应式条件改为@media only screen and (min-width: 1920px){ },如果本身是1920转的vw,可以直接把@media only screen and (min-width: 1200px) and (max-width: 1920px) { } 的 and (max-width:1920px)去掉 

觉得有用请点个赞吧!
0 1105