如何在本网站上实现文本/元素定位

Question

当您纵向和横向调整浏览器窗口的大小时，您会注意到边缘周围的文本/元素移近或远离边缘，始终与浏览器窗口保持均匀的距离。这是如何实现的？

http://www.themustafacelik.com/

是用纯CSS完成还是涉及Javascript或jQuery？

Answer 1

它使用position：absolute和right，top，bottom，left：distance

例如＆＃34;所有作品＆＃34;文字使用

position:absolute;
top:calc(7vw - 6px);
right: calc(7vw - 6px);

这是example

Answer 2

文本缩小的原因是因为元素的样式字体大小为vw，因此它响应宽度：

@media (max-width: 767px) {
    .home #col2 h2 {
        font: 500 normal 18vw/20vw 'Adelon'
    }
}

注意:: - 我诚实地认为，您最好在font-size或rem设置em因为vw将字体的大小缩小到你不太期望的东西。使用rem或em，您可以分别调整根/父元素的字体大小，子元素将跟随。