响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh） about blog HOT 17 OPEN

写的很好

from blog.

你好！vw和vh我是用设计稿的宽和高来计算元素的值，写在页面里面，
例：24(元素)÷750(设计稿)×100(转换vw)=3.2vw,
高度也是这样计算的，chrome浏览器vw宽度是没有问题，
vh高度却比设计稿少三分之一请问你知道为什么吗？

from blog.

你好！vw和vh我是用设计稿的宽和高来计算元素的值，写在页面里面，
例：24(元素)÷750(设计稿)×100(转换vw)=3.2vw,
高度也是这样计算的，chrome浏览器vw宽度是没有问题，
vh高度却比设计稿少三分之一请问你知道为什么吗？

vw和vh都是根据视口来确定实际像素的，视口上的宽度和高度比例不一定是1:1 的，而且一般来说，vh和vw不用同时使用，使用vw一般就满足移动端适配的要求了

from blog.

你好！vw和vh我是用设计稿的宽和高来计算元素的值，写在页面里面，
例：24(元素)÷750(设计稿)×100(转换vw)=3.2vw,
高度也是这样计算的，chrome浏览器vw宽度是没有问题，
vh高度却比设计稿少三分之一请问你知道为什么吗？

vw和vh都是根据视口来确定实际像素的，视口上的宽度和高度比例不一定是1:1 的，而且一般来说，vh和vw不用同时使用，使用vw一般就满足移动端适配的要求了

谢谢你的回复，有时候会用到vh。我找到问题了，不应该用设计图上的高度，它很高，应该用@2×(两倍图)的宽度和高度，个人疏忽造成的。

from blog.

写得好清楚，可以转载你的这篇文章吗？

from blog.

写得很好~

from blog.

mark

from blog.

mark

from blog.

REM计算有问题吧？
function refreshRem() {
var docEl = doc.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
这段代码逐行分析一下
第一行doc 是指document? doc.documentElement 是指document.documentElement？既docEl 指html
第二行width = docEl.getBoundingClientRect().width;也就是PC情况下width = 2560，
第三行rem = width / 10; 也就是256
第四行docEl.style.fontSize = rem + 'px'; 一个fontSize 等于256px(比牛逼都大个)
第五行flexible.rem = win.rem = rem;不知道是从哪里来往哪去
这么好的文章总结希望再严谨验证一下

from blog.

写的很好，概述的非常明白

from blog.

from blog.

mark

from blog.

他们说的逻辑像素是什么？
1 DPR = 物理像素／分辨率
像素和分辨率之间可以相除吗？为啥有些地方说分辨率是指纵横向上的像素点数

from blog.

from blog.

写的太好了，我想转载您的多篇文章到我的自己的博客上，追赶您的脚步

from blog.

from blog.

from blog.