当您调整浏览器窗口的垂直和水平大小时,您会注意到,边缘周围的文本/元素移动得更近或更远,始终与浏览器窗口的四面八方保持均匀距离。这是如何实现的?
http://www.themustafacelik.com/
它是用纯css完成的,还是涉及到Javascript或jQuery?
发布于 2018-04-12 16:47:47
它使用的位置:绝对和右,上,下,左:距离。
例如,"All works“文本使用
position:absolute;
top:calc(7vw - 6px);
right: calc(7vw - 6px);
这是一个示例
发布于 2018-04-12 16:53:53
文本缩小的原因是元素的字体大小单位为vw
,因此它响应宽度:
@media (max-width: 767px) {
.home #col2 h2 {
font: 500 normal 18vw/20vw 'Adelon'
}
}
注意:--在我的诚实意见中,最好将font-size
设置为rem
或em
,因为vw
有时会将字体的大小缩小到您没有预料到的范围。使用rem
或em
,您可以分别调整根/父元素的字体大小,子元素也会随之调整。
https://stackoverflow.com/questions/49801933
复制相似问题