Skocz do zawartości

Zdjęcie
- - - - -

Zmniejszanie wymiarów diva w zalezności od rozdzielczości


8 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 21 stycznia 2016 - 08:47

#1

Witam,

czy da się w jakiś sposób zmniejszać rozmiary diva w zależności od rozdzielczości? Chciałbym uzyskać podobny efekt jaki daje dodanie classy img-responsive w bootstrapie.

Załóżmy, że mam takie coś:

pomiar_grubosci_powloki_lakierniczej_sam

 

Mam jeden główny div, w którym są inne, odpowiadające za poszczególne elementy wypozycjonowane absolutnie. Jak zrobić, aby na mniejszych rozdzielczościach zmniejszało mi automatycznie wymiary tych divów i zmieniało ich pozycję?


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 stycznia 2016 - 08:59

#2

Witam,

czy da się w jakiś sposób zmniejszać rozmiary diva w zależności od rozdzielczości? Chciałbym uzyskać podobny efekt jaki daje dodanie classy img-responsive w bootstrapie.

Załóżmy, że mam takie coś:

pomiar_grubosci_powloki_lakierniczej_sam

 

Mam jeden główny div, w którym są inne, odpowiadające za poszczególne elementy wypozycjonowane absolutnie. Jak zrobić, aby na mniejszych rozdzielczościach zmniejszało mi automatycznie wymiary tych divów i zmieniało ich pozycję?

Ich szerokości ustawiaj procentowo. Ewentualnie jeśli chcesz zmieniać układ na mobilkach chociażby, to użyj media queries:

 

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

@media (min-width: 601px) and (max-width: 992px) {
  .facet_sidebar {
    display: inline-block;
  }
}

  • 2

webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 21 stycznia 2016 - 09:06

#3

No okej, a co z ich wysokością i pozycją?


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 stycznia 2016 - 09:28

#4

No okej, a co z ich wysokością i pozycją?

pozycję ustalasz absolutem tak? Czyli na przykład top: 0; left: 0; albo top 0: left: 50%;

Co do wysokości, to jak dajesz na przykład width: 75% (bo załóżmy że tyle zajmuje ten pierwszy szkic samochodu), to height ustawiasz na auto;


UPDATE:

Najlepiej będzie jak wrzucisz gdzieś na jssfiddle zdjęcia i kawałek kodu i opiszesz z czym masz problem, albo jaki efekt chcesz osiągnąć.


  • 2

webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 21 stycznia 2016 - 10:29

#5

https://jsfiddle.net/2xLg6jt7/


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 21 stycznia 2016 - 13:56

#6

Wszystko procentowo robisz i będzie działać. Musisz sobie obliczyć ile % wysokości/szerokości całości boxu mają dane elementy (przy normalnej wielkości). tak samo z pozycjami.

Jeżeli ten box z przodem będzie miał np szerokość 25% to tym kolejnym boxom (co boki widać) dajesz left 25%). Jeżeli ten prawy bok będzie miał wysokość 50%, to lewemu bokowi tom ustawiasz na 50% etc.

 

A na końcu całem containerowi #vehicle ustawiasz width: 100% i po sprawie :)


  • 2

webDeveloper


webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 21 stycznia 2016 - 14:43

#7

Tylko jeżeli będę chciał ustawić vehicle-front i vehicle-rear to muszę znać wysokość całego vehicle, a kompletnie nie mam pomysłu jak je wyciągnąć.

Jeśli chodzi o pozycjonowanie left i right to dam rade, ale na odległość od topa nie mam pomysłu.

+ pojawia się kolejne pytanie. Jak wtedy zmniejszyć tło? Background-size? Ale jakie wtedy parametry będzie miało?

 

Czy może lepiej zrobić to jakoś zupełnie inaczej?


  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 21 stycznia 2016 - 19:28

#8

A budujesz grida bootstapowego czy wg własnych założeń ?
Bootstrapowy jest AWD z założenia.

Chyba że nie wczytałeś się uprzednio w manual, gdzie już on sam jest AWD: http://getbootstrap....caffolding.html ;)
 


  • 1

webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 23 stycznia 2016 - 08:59

#9
Można zamknąć. Dzięki panowie!
  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych