没有设计稿的情况下使用vw布局，怎么度量px

老师，没学vw这些等比例布局之前，都是写固定px大小来布局的。

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
            width: 100%;
            height: 60px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

如果把div的高度设置成60px时，代码的效果图为：

如果把div的高度设置成60px并通过px2vw插件转为vw时（插件设置的设计稿宽度为750px），代码的效果图为：（60px转化为vw后是8vw）

在模拟同样的手机机型下，肉眼明显可见他们的实现效果高度完全不一样，第一个的高度比较大。

老师，这种在没有设计稿的情况下设计网页，以前60px高大概有多高，心里有个数（举个例子：就像现实生活中，一米大概有多高，心里知道大概是多少）。现在转成vw，和以前的不一样高度了，导致里面没底，不能快速的决定这个高度转换成vw前该设置多少px比较合适。老师这个问题是怎么解决的呢？

localhost999 2022-03-03

源自：rem和vw布局 2-7 vw布局方案

收起

3回答

设计转前端zy 2022-03-13 23:43:46

设计一般给的图是一倍图，也就是375宽，通过蓝湖可以转换为2倍图等任意尺寸，方便适配其他机型，你只需要选二倍图，也就是750px参数来设置vw就行了

谷歌浏览器可以设置750的尺寸来对边着看

收起回答

好帮手慕星星 2022-03-04 10:01:00

同学你好，750的设计稿不需要改变插件的基准值。

例如设计稿中元素高度是120px，那么在iphone6设备下高度就是60px，我们写元素高度的时候为120px，插件转化为16vw，是我们想要的60px高度

自己再理解下。

收起回答

提问者 localhost999 #1

老师这样每次都要高度X2，再转换vw，比较麻烦，能不能直接设置浏览器模拟机型宽度为750呢

2022-03-04 11:00:56
提问者 localhost999 #2

（不改变插件默认750的情况下）

2022-03-04 11:01:48
好帮手慕星星回复提问者 localhost999 #3

高度不需要乘以2，750设计稿换算到375上除以2，插件是按照750计算的，再乘以2，这样就抵消掉了，没问题。750设计稿上是多少px，编辑器中就行多少px，再转化就可以了。

2022-03-04 11:44:00

点开查看后面2条评论

好帮手慕星星 2022-03-03 18:32:44

同学你好，iPhone6的设备宽是375，分辨率是750，但是加了viewport，页面宽等于设备宽，页面宽也会是375 。而插件转化的基准是750，所以原来60px，需要写为120px才能正确转化。

或者将插件的基准值改为375，元素高设置60px再转化就好了。

祝学习愉快！

收起回答

提问者 localhost999 #1

老师，那实际开发的设计稿一般都是750px，但是浏览器F12里面没看到有宽为750px的设备，开发的时候该怎么使用px精准调试效果呢？

2022-03-03 18:36:07
提问者 localhost999 #2

就是不改变插件750宽度设置的前提下，怎么解决呢？

2022-03-03 18:37:22