player GUI css 작업

반응형으로 작업하기위해 vw로 이용했었는데

pc에서 브라우저 사이즈와 video 사이즈가 일치하지 않아 오류

=> em으로 작업

 

html에 font-size를 px로 주고

미디어쿼리로 일정사이즈 이하에서 vw로 변환

 

비디오사이즈보다 작게 브라우저창을 줄이지 않을거라는 가정하에

나는 pc video width 740으로 주었다

 

 

@media only screen and (max-width:740px) {
  html {  font-size: 3.3956vw; }
}

 

단 pc에서 740보다 작게 브라우저를 줄이면 UI는 vw로 변환되어

비디오사이즈는 고정, UI는 유동적으로 변환된다.

 

.play-progress:before {
    font-size: 1.042em;
    position: absolute;
    right: -0.5em;
    top: -0.4em;
  }