Skocz do zawartości
Zbiórka na nowy wygląd forum! ×

Ukrycie grafiki / elementów na wersji mobilnej IPS 4


Rekomendowane odpowiedzi

Wprowadzenie do klas responsywnych

 

Struktura CSS IPS4 jest responsywna , co oznacza, że elementy dostosowują się do rozmiaru wyświetlacza, z którego użytkownik zdecyduje się korzystać. W większości przypadków zajmą się tym istniejące już klasy, które zostały już opisane w tym przewodniku; na przykład menu automatycznie się dostosowują, a paski kart zwijają się w menu rozwijane na telefonach komórkowych.

Może się zdarzyć, że będziesz musiał kontrolować, na jakich urządzeniach rozmiary elementów pokazują się lub ukrywają. Na przykład, jeśli dodasz niestandardowy element stopki, możesz chcieć pokazać go tylko na komputerze i ukryć na tabletach lub telefonach.

Klasy responsywne udostępniane przez IPS4 pozwalają kontrolować tego rodzaju zachowanie.

 

Responsywne rozmiary używane przez IPS4

 

Na potrzeby zapytań o media, których używamy do kontrolowania czasu reakcji, następujące rozmiary reprezentują każde urządzenie:

  • Telefony - do 767 pikseli szerokości
  • Tablety - szerokość od 768 do 979 pikseli
  • Komputery stacjonarne - 980 pikseli i szersze

 

Podstawowa funkcjonalność pokaż/ukryj

 

Struktura CSS obejmuje dwie grupy po trzy klasy, które pokazują lub ukrywają elementy odpowiednio na komputerach , tabletach i telefonach. Zajęcia działają w sposób ekskluzywny; oznacza to, że jeśli użyjesz  show classes, urządzenia, które nie pasują, nie pokażą elementu. Prawdą jest również coś przeciwnego; jeśli używasz hide classes, a następnie element nie pojawi się na tych urządzeniach, ale będą wyświetlane na innych nie wymienionych.

Classes:

  • ipsResponsive_hideTelefon
  • ipsResponsive_hideTablet
  • ipsResponsive_hideDesktop
  • ipsResponsive_showPhone
  • ipsResponsive_showTablet
  • ipsResponsive_showDesktop

 

Możesz je łączyć w razie potrzeby. Na przykład:

<div class='ipsResponsive_hidePhone ipsResponsive_hideTablet'>
 Ten element *nie* będzie* wyświetlany na telefonach lub tabletach, ale *będzie* wyświetlany na komputerach </div>

 

Dodatkowe klasy do sterowania wyświetlaniem elementów

 

Korzystając z  show classes opisanych powyżej, zazwyczaj musisz dołączyć dodatkową klasę, która kontroluje sposób renderowania elementu. Może to być jeden z następujących:

  • ipsResponsive_block
  • ipsResponsive_inlineBlock
  • ipsResponsive_inline

 

<div class='ipsResponsive_showDesktop ipsResponsive_block'>
 Ten element będzie *tylko* wyświetlany na komputerach o rozmiarach i będzie renderowany jako element na poziomie bloku. </div>

Te dodatkowe klasy zwykle nie są potrzebne podczas korzystania z hide classes.

 

Źródło: https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

POSZUKUJE WSPÓLNIKÓW / OPIEKUNÓW - NA SERWERKI CS:GO!

:!!: Skontaktuj się ze mną po więcej szczegółów :!!:

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...