Как сделать CSS нарисованным персонажем отзывчивым внутри столбца начальной загрузки

Это может быть очень глупый вопрос, но есть ли способ заставить мой 8-битный CSS-символ реагировать, поместив его в div в bootstrap? Или у кого-нибудь есть предложения по тому, чтобы сделать пиксели себя отзывчивыми?Как сделать CSS нарисованным персонажем отзывчивым внутри столбца начальной загрузки

Я хочу, чтобы персонаж имел возможность изменять размер при просмотре на мобильном устройстве, но в настоящее время мне не повезло.

JS Fiddle персонажа помещается в DIV https://jsfiddle.net/jebwp7Ln/

HTML, (б представляет символ)

<header> 
      <div class="container"> 
       <div class="col-md-12"> 
        <div class="col-md-8">Hello</div> 
       </div> 

       <!--Pixel Me Dude --> 
       <div class="col-md-4"> 
        <div class="b"></div> 
       </div> 
      </div> 
    </header>

CSS-

.b { 
    content: ''; 
    position: absolute; 
    top: 35%; 
    left: 30%; 
    display: block; 
    box-sizing: border-box; 
    width: 11px; 
    height: 11px; 
    box-shadow: 0px 0px transparent, 0px 0px transparent, 11px 0px transparent, 22px 0px transparent, 33px 0px transparent, 44px 0px transparent, 55px 0px transparent, 66px 0px #3a3a3a, 77px 0px #000, 88px 0px #3a3a3a, 99px 0px #000, 110px 0px #000, 121px 0px #000, 132px 0px #000, 143px 0px transparent, 154px 0px transparent, 165px 0px transparent, 176px 0px transparent, 11px 11px transparent, 22px 11px transparent, 33px 11px transparent, 44px 11px transparent, 55px 11px #3a3a3a, 66px 11px #000, 77px 11px #3a3a3a, 88px 11px #000, 99px 11px #000, 110px 11px #000, 121px 11px #000, 132px 11px #000, 143px 11px #000, 154px 11px transparent, 165px 11px transparent, 176px 11px transparent, 187px 11px transparent, 11px 22px transparent, 22px 22px transparent, 33px 22px transparent, 44px 22px #3a3a3a, 55px 22px #000, 66px 22px #3a3a3a, 77px 22px #000, 88px 22px #000, 99px 22px #000, 110px 22px #000, 121px 22px #000, 132px 22px #000, 143px 22px #000, 154px 22px #000, 165px 22px transparent, 176px 22px transparent, 187px 22px transparent, 11px 33px transparent, 22px 33px transparent, 33px 33px #3a3a3a, 44px 33px #000, 55px 33px #3a3a3a, 66px 33px #000, 77px 33px #000, 88px 33px #000, 99px 33px #000, 110px 33px #000, 121px 33px #000, 132px 33px #000, 143px 33px #000, 154px 33px #000, 165px 33px #000, 176px 33px transparent, 187px 33px transparent, 11px 44px transparent, 22px 44px #3a3a3a, 33px 44px #000, 44px 44px #3a3a3a, 55px 44px #000, 66px 44px #000, 77px 44px #000, 88px 44px #000, 99px 44px #000, 110px 44px #000, 121px 44px #000, 132px 44px #000, 143px 44px #000, 154px 44px #000, 165px 44px #000, 176px 44px #000, 187px 44px transparent, 11px 55px transparent, 22px 55px #3a3a3a, 33px 55px #f5cbb6, 44px 55px #f5cbb6, 55px 55px #fadece, 66px 55px #fadece, 77px 55px #fadece, 88px 55px #fadece, 99px 55px #fadece, 110px 55px #fadece, 121px 55px #fadece, 132px 55px #fadece, 143px 55px #fadece, 154px 55px #fadece, 165px 55px #fadece, 176px 55px #000, 187px 55px transparent, 11px 66px transparent, 22px 66px #3a3a3a, 33px 66px #f5cbb6, 44px 66px #f5cbb6, 55px 66px #fadece, 66px 66px #fadece, 77px 66px #fadece, 88px 66px #fadece, 99px 66px #fadece, 110px 66px #fadece, 121px 66px #fadece, 132px 66px #fadece, 143px 66px #fadece, 154px 66px #fadece, 165px 66px #fadece, 176px 66px #000, 187px 66px transparent, 11px 77px transparent, 22px 77px #3a3a3a, 33px 77px #f5cbb6, 44px 77px #f5cbb6, 55px 77px #fadece, 66px 77px #fadece, 77px 77px #fadece, 88px 77px #fadece, 99px 77px #fadece, 110px 77px #fadece, 121px 77px #fadece, 132px 77px #fadece, 143px 77px #fadece, 154px 77px #fadece, 165px 77px #fadece, 176px 77px #000, 187px 77px transparent, 11px 88px transparent, 22px 88px #3a3a3a, 33px 88px #f5cbb6, 44px 88px #f5cbb6, 55px 88px #fadece, 66px 88px #fadece, 77px 88px #fadece, 88px 88px #fadece, 99px 88px #fadece, 110px 88px #fadece, 121px 88px #fadece, 132px 88px #fadece, 143px 88px #fadece, 154px 88px #fadece, 165px 88px #fadece, 176px 88px #000, 187px 88px transparent, 11px 99px transparent, 22px 99px #3a3a3a, 33px 99px #f5cbb6, 44px 99px #3a3a3a, 55px 99px #000, 66px 99px #000, 77px 99px #000, 88px 99px #fadece, 99px 99px #fadece, 110px 99px #fadece, 121px 99px #3a3a3a, 132px 99px #000, 143px 99px #000, 154px 99px #000, 165px 99px #fadece, 176px 99px #000, 187px 99px transparent, 11px 110px transparent, 22px 110px #3a3a3a, 33px 110px #f5cbb6, 44px 110px #fadece, 55px 110px #fadece, 66px 110px #3a3a3a, 77px 110px #fadece, 88px 110px #fadece, 99px 110px #f5cbb6, 110px 110px #fadece, 121px 110px #fadece, 132px 110px #3a3a3a, 143px 110px #fadece, 154px 110px #fadece, 165px 110px #fadece, 176px 110px #000, 187px 110px transparent, 11px 121px transparent, 22px 121px #fadece, 33px 121px #f5cbb6, 44px 121px #fadece, 55px 121px #fadece, 66px 121px #fadece, 77px 121px #fadece, 88px 121px #fadece, 99px 121px #f5cbb6, 110px 121px #fadece, 121px 121px #fadece, 132px 121px #fadece, 143px 121px #fadece, 154px 121px #fadece, 165px 121px #fadece, 176px 121px #f5cbb6, 187px 121px transparent, 11px 132px transparent, 22px 132px #fadece, 33px 132px #f5cbb6, 44px 132px #fadece, 55px 132px #fadece, 66px 132px #fadece, 77px 132px #fadece, 88px 132px #fadece, 99px 132px #f5cbb6, 110px 132px #fadece, 121px 132px #fadece, 132px 132px #fadece, 143px 132px #fadece, 154px 132px #fadece, 165px 132px #fadece, 176px 132px #f5cbb6, 187px 132px transparent, 11px 143px transparent, 22px 143px #fadece, 33px 143px #f5cbb6, 44px 143px #fadece, 55px 143px #fadece, 66px 143px #fadece, 77px 143px #fadece, 88px 143px #fadece, 99px 143px #f5cbb6, 110px 143px #fadece, 121px 143px #fadece, 132px 143px #fadece, 143px 143px #fadece, 154px 143px #fadece, 165px 143px #fadece, 176px 143px #f5cbb6, 187px 143px transparent, 11px 154px transparent, 22px 154px transparent, 33px 154px #f5cbb6, 44px 154px #fadece, 55px 154px #fadece, 66px 154px #fadece, 77px 154px #fadece, 88px 154px #f5cbb6, 99px 154px #f5cbb6, 110px 154px #f5cbb6, 121px 154px #fadece, 132px 154px #fadece, 143px 154px #fadece, 154px 154px #fadece, 165px 154px #fadece, 176px 154px transparent, 187px 154px transparent, 11px 165px transparent, 22px 165px transparent, 33px 165px #f5cbb6, 44px 165px #fadece, 55px 165px #fadece, 66px 165px #fadece, 77px 165px #3a3a3a, 88px 165px #3a3a3a, 99px 165px #3a3a3a, 110px 165px #3a3a3a, 121px 165px #3a3a3a, 132px 165px #fadece, 143px 165px #fadece, 154px 165px #fadece, 165px 165px #fadece, 176px 165px transparent, 187px 165px transparent, 11px 176px transparent, 22px 176px transparent, 33px 176px #f5cbb6, 44px 176px #fadece, 55px 176px #fadece, 66px 176px #3a3a3a, 77px 176px #3a3a3a, 88px 176px #3a3a3a, 99px 176px #3a3a3a, 110px 176px #3a3a3a, 121px 176px #3a3a3a, 132px 176px #3a3a3a, 143px 176px #fadece, 154px 176px #fadece, 165px 176px #fadece, 176px 176px transparent, 187px 176px transparent, 11px 187px transparent, 22px 187px transparent, 33px 187px #f5cbb6, 44px 187px #fadece, 55px 187px #fadece, 66px 187px #3a3a3a, 77px 187px transparent, 88px 187px transparent, 99px 187px transparent, 110px 187px transparent, 121px 187px transparent, 132px 187px #3a3a3a, 143px 187px #fadece, 154px 187px #fadece, 165px 187px #fadece, 176px 187px transparent, 187px 187px transparent, 11px 198px transparent, 22px 198px transparent, 33px 198px transparent, 44px 198px #e5ddd9, 55px 198px #e5ddd9, 66px 198px #3a3a3a, 77px 198px #e5ddd9, 88px 198px transparent, 99px 198px transparent, 110px 198px transparent, 121px 198px #e5ddd9, 132px 198px #3a3a3a, 143px 198px #e5ddd9, 154px 198px #e5ddd9, 165px 198px transparent, 176px 198px transparent, 187px 198px transparent, 11px 209px transparent, 22px 209px transparent, 33px 209px transparent, 44px 209px transparent, 55px 209px #e5ddd9, 66px 209px #3a3a3a, 77px 209px #e5ddd9, 88px 209px #3a3a3a, 99px 209px #3a3a3a, 110px 209px #3a3a3a, 121px 209px #e5ddd9, 132px 209px #3a3a3a, 143px 209px #e5ddd9, 154px 209px transparent, 165px 209px transparent, 176px 209px transparent, 187px 209px transparent, 11px 220px transparent, 22px 220px transparent, 33px 220px transparent, 44px 220px transparent, 55px 220px transparent, 66px 220px #3a3a3a, 77px 220px #3a3a3a, 88px 220px #3a3a3a, 99px 220px #3a3a3a, 110px 220px #3a3a3a, 121px 220px #3a3a3a, 132px 220px #3a3a3a, 143px 220px transparent, 154px 220px transparent, 165px 220px transparent, 176px 220px transparent, 187px 220px transparent, 11px 231px transparent, 22px 231px transparent, 33px 231px transparent, 44px 231px transparent, 55px 231px transparent, 66px 231px transparent, 77px 231px #f5cbb6, 88px 231px #fadece, 99px 231px #fadece, 110px 231px #fadece, 121px 231px #fadece, 132px 231px transparent, 143px 231px transparent, 154px 231px transparent, 165px 231px transparent, 176px 231px transparent, 187px 231px transparent, 11px 242px transparent, 22px 242px transparent, 33px 242px transparent, 44px 242px transparent, 55px 242px transparent, 66px 242px #19689d, 77px 242px #f5cbb6, 88px 242px #fadece, 99px 242px #fadece, 110px 242px #fadece, 121px 242px #fadece, 132px 242px #0f75bc, 143px 242px transparent, 154px 242px transparent, 165px 242px transparent, 176px 242px transparent, 187px 242px transparent, 11px 253px transparent, 22px 253px transparent, 33px 253px transparent, 44px 253px transparent, 55px 253px transparent, 66px 253px #19689d, 77px 253px #f5cbb6, 88px 253px #fadece, 99px 253px #fadece, 110px 253px #fadece, 121px 253px #fadece, 132px 253px #0f75bc, 143px 253px transparent, 154px 253px transparent, 165px 253px transparent, 176px 253px transparent, 187px 253px transparent, 11px 264px #19689d, 22px 264px #19689d, 33px 264px #19689d, 44px 264px #19689d, 55px 264px #19689d, 66px 264px #19689d, 77px 264px #19689d, 88px 264px #fadece, 99px 264px #fadece, 110px 264px #fadece, 121px 264px #0f75bc, 132px 264px #0f75bc, 143px 264px #0f75bc, 154px 264px #0f75bc, 165px 264px #0f75bc, 176px 264px #0f75bc, 187px 264px #0f75bc, 11px 275px #19689d, 22px 275px #0f75bc, 33px 275px #0f75bc, 44px 275px #0f75bc, 55px 275px #0f75bc, 66px 275px #0f75bc, 77px 275px #0f75bc, 88px 275px #0f75bc, 99px 275px #19689d, 110px 275px #0f75bc, 121px 275px #0f75bc, 132px 275px #0f75bc, 143px 275px #0f75bc, 154px 275px #0f75bc, 165px 275px #0f75bc, 176px 275px #0f75bc, 187px 275px #0f75bc, 11px 286px #19689d, 22px 286px #0f75bc, 33px 286px #0f75bc, 44px 286px #0f75bc, 55px 286px #0f75bc, 66px 286px #0f75bc, 77px 286px #0f75bc, 88px 286px #0f75bc, 99px 286px #0f75bc, 110px 286px #0f75bc, 121px 286px #0f75bc, 132px 286px #0f75bc, 143px 286px #0f75bc, 154px 286px #0f75bc, 165px 286px #0f75bc, 176px 286px #0f75bc, 187px 286px #0f75bc, 11px 297px #19689d, 22px 297px #0f75bc, 33px 297px #0f75bc, 44px 297px #0f75bc, 55px 297px #0f75bc, 66px 297px #0f75bc, 77px 297px #0f75bc, 88px 297px #0f75bc, 99px 297px #19689d, 110px 297px #0f75bc, 121px 297px #0f75bc, 132px 297px #0f75bc, 143px 297px #0f75bc, 154px 297px #0f75bc, 165px 297px #0f75bc, 176px 297px #0f75bc, 187px 297px #0f75bc; 
}

Заранее спасибо!

источник

2015-03-19 lollipopwizardkid

коробчатой тень не поддерживает использование эм или% единиц, и не это эффективный способ создания «значка» реагирующий и управлять им. Я бы предложил использовать векторный js-плагин, такой как SnapSVG. Пример можно увидеть здесь по ссылке codepen по автору: http://stackoverflow.com/questions/20953076/responsive-svg-path-with-snapsvg –

Спасибо, я отправлю ответ, когда у меня есть нашли эффективное решение. Я думаю, что это SnapSVG может быть направлением – lollipopwizardkid

Я согласен, вы хотите иметь возможность управлять и контролировать элементы, которые вы создаете. Все, что вам нужно сделать, это создать элемент html svg canvas и изучить некоторые из основных вызовов api, чтобы получить что-то не анимированное: http://codepen.io/mattsince87/pen/vdEbg –

Я предлагаю вам изменить единицы от «рх» до «эм», а затем использовать медиа-запрос, чтобы изменить размер шрифта, +/- вокруг 1px. Это работает, потому что 1em имеет тот же размер, что и размер шрифта.

У меня есть forked ваш jsFiddle here, который демонстрирует это.

Запросов СМИ, как это, но вы можете их изменить:

/* Smartphones ----------- */ 
@media (min-width : 320px) and (max-width : 480px) { 
    .b { 
     font-size: 0.5px; 
    } 
} 
/* iPads ----------- */ 
@media (min-width : 480px) and (max-width : 1024px) { 
    .b { 
     font-size: 0.7px; 
    } 
} 
/* Desktops and laptops ----------- */ 
@media (min-width : 1024px) { 
    .b { 
     font-size: 1px; 
    } 
} 
/* Large screens ----------- */ 
@media (min-width : 1824px) { 
    .b { 
     font-size: 1.5px; 
    } 
}

источник

2015-03-19 21:57:41

Хороший ответ !!!! – inorganik

OMG спасибо. Это абсолютно идеально. – lollipopwizardkid

@lollipopwizardkid отлично! Не могли бы вы принять ответ? –

Это может быть длинный, но единственное, о чем я мог подумать - это использовать отзывчивый блок css вместо px. Возможно, вы можете использовать vmin, но тогда вам также придется изменить все ваши значения чисел.

Ссылка: Lengths of CSS

источник

2015-03-19 21:32:49 zgood

Спасибо @zgood I ' Посмотрите на это! – lollipopwizardkid

Как сделать CSS нарисованным персонажем отзывчивым внутри столбца начальной загрузки

ответ

Смежные вопросы