rem – Root EM
skalowanie jednostki tekstu względem głównej (root) wartości.
html{font-size: 10px;} body {font-size: 1.4rem} h1{width: 2.4rem}
czyli:
body => html font-size * 1.4 = 14px
h1 => html font size * 2.4 = 24px
skalowanie:
@media only screen and (min-width: 1024px){ html{font-size: 20px;) }
czyli:
body => 28px
h1 => 48px
Z użyciem LESS:
.width(@sizeValue){ @remValue: @sizeValue; @pxValue: (@sizeValue *10); width: ~"@{pxValue}px"; width: ~"@{remValue}rem"; } p{ .width(13); }
w CSS:
p{ width: 130px; width: 13rem; /* ignorowane w przeglądarkach nie obsługujących remów */ }
mixin wyliczający font w zależności od szerokości ekranu:
w LESS:
.responsiveDesktop(@maxWidth){ @media only screen and (min-width: ~"@{maxWidth}px"){ html{ @fontSize: ((@maxWidth - 50) * 40 / 1230); //1280-50=1230 font-size: ~"@{fontSize}px"; } } }
w CSS:
.responsiveDesktop(1024){ @media only screen and (min-width: 1024px;){ html{ font-size: 31.67479674796748px } } }
—
Hope this helps and happy coding :)
Zobacz jeszcze
darmowe wektory, fotografie, elementy
Ładne i darmowe: fotografie: unsplash.com pexels.com minimography.com fancycrave.com foodshot.co imagefinder.co lifeofpix.com freephotos.cc more... and more......
designinspiration
viewport units
1vw = 1% of viewport width 1vh = 1% of viewport width 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger ie8 <!--> <link...