Skip to content

Instantly share code, notes, and snippets.

@AlekseyPn

AlekseyPn/Pixel Glass

Created April 1, 2017 15:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlekseyPn/2e45ad09aa1b060feb0aedbe692fe3bc to your computer and use it in GitHub Desktop.
Save AlekseyPn/2e45ad09aa1b060feb0aedbe692fe3bc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pixel Glass
Как использовать Pixel Glass в своём проекте?
1. Установите пакет в папку с проектом через npm:
npm i pixel-glass --save-dev
2. Поместите макеты страниц в ваш проект в папку img (или в другую, какая вам нравится).
3. Добавьте этот код на вашу страницу в элемент <head>:
<!-- Pixel Glass -->
<style>
HTML {
background-repeat: no-repeat;
background-position: 50% 0;
/* По умолчанию показывается мобильный макет */
background-image: url( "img/320.png" );
}
/* Планшет */
@media ( min-width: 760px ) {
HTML {
/* Планшетный макет */
background-image: url( "img/760.png" );
}
}
/* Десктоп */
@media ( min-width: 960px ) {
HTML {
/* Десктопный макет */
background-image: url( "img/960.png" );
}
}
</style>
<link href="../node_modules/pixel-glass/styles.css" rel="stylesheet">
<script src="../node_modules/pixel-glass/script.js"></script>
<!-- // Pixel Glass -->
Отредактируйте код под ваш проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment