I'm using vw as the unit for my font size, so that it will look nicely when resize the browser. However, when I browse it at Safari, the content run, anyone know how to solve it? thanks
CSS
.flatNav {
background-image: url(../img/navBar.png);
background-repeat: repeat-x;
width: 90%;
margin-right: auto;
margin-left: auto;
font-size: 0.8vw;
height: 48px;
position: relative;
top: 28px;
background-position: center;
}
.flatNav ul {
list-style-type: none;
height: 48px;
width: 75%;
margin-right: 1.46vw;
margin-left: 1.46vw;
position: relative;
top: -47px;
}
REM is a font value which works well for browser resize but there are certain browser compatibility issues.
EMs could very well be used and they will do a good job during browser resizing and in responsive websites too. This works across browsers too.
Check out this website if you want to convert your pixels to EM values and use the same: http://www.pxtoem.com/
Hope this helps.