Sticky footer или как да задържим footer-а в долната част на страницата

неделя, 26 юни 2016 / Published in CSS, Код оптимизация 
<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>
html,body {margin: 0; padding: 0; height: 100%}
#container {min-height: 100%; position: relative}
#body {padding-bottom: 60px;}
#footer {position: absolute; bottom: 0; width: 100%; height: 60px}

Media queries

неделя, 26 юни 2016 / Published in CSS, Код оптимизация

HTML head

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">

style.css

@media screen and (max-width:979px){
    ....
}
 
@media screen and (min-width:980px){
    ....
}
 
@media screen and (min-width:765px) and (max-width:980px){
    ....
}

Използване на font-face

неделя, 26 юни 2016 / Published in CSS 
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}