Skocz do zawartości
×
×
  • Dodaj nową pozycję...

Zablokowane Ukrycie grafiki / elementów na wersji mobilnej IPS 4


RumcajsJumper
 Udostępnij

Rekomendowane odpowiedzi

  • Właściciel

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 komentarza
Udostępnij na innych stronach

  • Cry zablokował ten temat

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

Powiadomienie o plikach cookie