Stworzyłem witrynę za pomocą siatki Zurb Foundation 3 . Każda strona ma dużą h1
:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}
<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->
Gdy zmieniam rozmiar przeglądarki na rozmiar mobilny, duża czcionka nie dostosowuje się i powoduje, że przeglądarka zawiera przewijanie w poziomie, aby zmieścić duży tekst.
Zauważyłem, że na przykładowej stronie Zurb Foundation 3 Typografia nagłówki dostosowują się do przeglądarki, ponieważ jest ona skompresowana i rozwinięta.
Czy brakuje mi czegoś naprawdę oczywistego? Jak to osiągnąć?
css
responsive-design
font-size
zurb-foundation
em
użytkownik2213682
źródło
źródło
Odpowiedzi:
font-size
Nie odpowie tak podczas zmiany rozmiaru okna przeglądarki. Zamiast tego reagują na ustawienia powiększenia / rozmiaru przeglądarki, na przykład gdy naciśniesz Ctrli +razem na klawiaturze w przeglądarce.Zapytania o media
Trzeba będzie spojrzeć na użycie zapytań o media, aby zmniejszyć rozmiar czcionki w określonych odstępach czasu, w których zaczyna on łamać projekt i tworzyć paski przewijania.
Na przykład spróbuj dodać to w swoim CSS na dole, zmieniając szerokość 320 pikseli dla każdego miejsca, w którym projekt zaczyna się psuć:
Długości procentowe rzutni
Można również użyć rzutni długości procentowe , takie jak
vw
,vh
,vmin
ivmax
. Oficjalny dokument W3C dla tego stwierdza:Ponownie, z tego samego dokumentu W3C każdą jednostkę można zdefiniować jak poniżej:
I są używane dokładnie tak samo, jak każda inna wartość CSS:
Kompatybilność jest względnie dobra, co można zobaczyć tutaj . Jednak niektóre wersje Internet Explorera i Edge nie obsługują vmax. Ponadto iOS 6 i 7 mają problem z jednostką vh, która została naprawiona w iOS 8.
źródło
font-size: 1.5vw;
?font-size: calc(12px + 1vw)
Możesz użyć wartości rzutni zamiast ems, pxs lub pts:
From CSS-Tricks: Viewport Sized Typography
źródło
Rozważam sposoby rozwiązania tego problemu i wierzę, że znalazłem rozwiązanie:
Jeśli potrafisz napisać aplikację dla Internet Explorera 9 (i nowszych) i wszystkich innych nowoczesnych przeglądarek obsługujących CSS calc (), jednostki rem i jednostki vmin. Możesz użyć tego do uzyskania skalowalnego tekstu bez zapytań o media:
Tutaj jest w akcji: http://codepen.io/csuwldcat/pen/qOqVNO
źródło
Używaj
media
specyfikatorów CSS (tego właśnie używają [zurb]) do responsywnego stylu:źródło
Jeśli nie masz nic przeciwko użyciu rozwiązania jQuery, możesz wypróbować wtyczkę TextFill
https://github.com/jquery-textfill/jquery-textfill
źródło
Można to osiągnąć na kilka sposobów.
Użyj zapytania o media , ale wymaga ono rozmiarów czcionek dla kilku punktów przerwania:
Użyj wymiarów w % lub em . Wystarczy zmienić podstawowy rozmiar czcionki, a wszystko się zmieni. W przeciwieństwie do poprzedniego, możesz po prostu zmienić czcionkę ciała, a nie h1 za każdym razem, lub pozwolić, aby podstawowy rozmiar czcionki był domyślny dla urządzenia, a reszta to
em
:Zobacz kyleschaeffer.com / ....
CSS 3 obsługuje nowe wymiary, które odnoszą się do portu widoku. Ale to nie działa na Androidzie:
3.2vmax = Większa z 3.2vw lub 3.2vh
Zobacz CSS-Tricks ... a także spójrz na Can I Use ...
źródło
Istnieje inne podejście do elastycznych rozmiarów czcionek - korzystanie z jednostek rem.
Później w zapytaniach o media możesz dostosować wszystkie rozmiary czcionek, zmieniając podstawowy rozmiar czcionki:
Aby to zadziałało w Internet Explorerze 7 i Internet Explorerze 8, musisz dodać awaryjne jednostki pikseli:
Jeśli rozwijasz się z Lessem , możesz stworzyć mixin, który wykona matematykę za Ciebie.
Obsługa urządzeń Rem - http://caniuse.com/#feat=rem
źródło
Rozwiązanie „vw” ma problem z przejściem na bardzo małe ekrany. Możesz ustawić rozmiar bazy i przejść stamtąd za pomocą calc ():
źródło
font-size: calc(1.2rem + 1vw)
nagłówka. W ten sposób miałem tę zaletę, że korzystałem z jednostki nie opartej na pikselach (choć może nie mieć to tutaj zastosowania). Miałem również awarię zwykłych ems dla starszych przeglądarek Wreszcie, ponieważ stało się to trochę małe na urządzeniach mobilnych, użyłem do nich zapytania medialnego. To może być zbyt skomplikowane, ale wydaje się, że robi to, co chciałem.Jest to częściowo zaimplementowane w fundamencie 5.
W pliku _type.scss mają dwa zestawy zmiennych nagłówka:
Dla średnich w górę generują rozmiary na podstawie pierwszego zestawu zmiennych:
A dla domyślnych, tj. Małych ekranów, używają drugiego zestawu zmiennych do generowania CSS:
Możesz użyć tych zmiennych i zastąpić w swoim niestandardowym pliku scss, aby ustawić rozmiary czcionek dla odpowiednich rozmiarów ekranu.
źródło
Elastyczny rozmiar czcionki można również wykonać za pomocą tego kodu JavaScript o nazwie FlowType :
FlowType - responsywna typografia sieci w najlepszym wydaniu: rozmiar czcionki oparty na szerokości elementu.
Lub ten kod JavaScript o nazwie FitText :
FitText - uelastycznia rozmiary czcionek. Użyj tej wtyczki w swoim responsywnym projekcie do zmiany rozmiaru nagłówków na podstawie proporcji.
źródło
Jeśli używasz narzędzia do kompilacji, wypróbuj Plecak.
W przeciwnym razie możesz użyć zmiennych CSS (właściwości niestandardowe), aby łatwo kontrolować minimalne i maksymalne rozmiary czcionek tak ( demo ):
źródło
Widziałem świetny artykuł z CSS-Tricks . Działa dobrze:
Na przykład:
Możemy zastosować to samo równanie do
line-height
właściwości, aby zmienić ją również w przeglądarce.źródło
Właśnie wymyśliłem pomysł, w którym musisz zdefiniować rozmiar czcionki tylko raz na element, ale wciąż mają na nią wpływ zapytania medialne.
Najpierw ustawiam zmienną „--text-scale-unit” na „1vh” lub „1vw”, w zależności od rzutni za pomocą zapytań o media.
Następnie używam zmiennej za pomocą funkcji calc () i mojego numeru multiplikatora dla rozmiaru czcionki:
W moim przykładzie użyłem tylko orientacji rzutni, ale zasada ta powinna być możliwa przy każdym zapytaniu o media.
źródło
vmin
ivmax
zamiast tego@media
biznesu?„FitText” jQuery jest prawdopodobnie najlepiej reagującym rozwiązaniem nagłówkowym. Sprawdź to na GitHub: https://github.com/davatron5000/FitText.js
źródło
Podobnie jak w przypadku wielu frameworków, kiedy „zejdziesz z siatki” i zastąpisz domyślny CSS frameworku, rzeczy zaczną się łamać w lewo iw prawo. Ramy są z natury sztywne. Jeśli miałbyś używać domyślnego stylu Zurb H1 wraz z domyślnymi klasami siatki, strona internetowa powinna wyświetlać się poprawnie na urządzeniach mobilnych (tj. Responsywnych).
Wydaje się jednak, że potrzebujesz bardzo dużych nagłówków 6.2em, co oznacza, że tekst będzie musiał się skurczyć, aby zmieścił się na wyświetlaczu mobilnym w trybie portretowym. Najlepszym rozwiązaniem jest użycie responsywnej wtyczki tekstowej jQuery, takiej jak FlowType i FitText . Jeśli chcesz czegoś lekkiego, możesz sprawdzić moją wtyczkę jQuery Scalable Text:
http://thdoan.github.io/scalable-text/
Przykładowe użycie:
źródło
W prawdziwym oryginalnym Sass (nie scss) możesz użyć poniższych miksów, aby automatycznie ustawić akapit i wszystkie nagłówki
font-size
.Podoba mi się, ponieważ jest znacznie bardziej kompaktowy. I szybsze pisanie. Poza tym zapewnia tę samą funkcjonalność. W każdym razie, jeśli nadal chcesz trzymać się nowej składni - scss, możesz przekonwertować moją zawartość Sass na scss tutaj: [KONWERSJA SASS NA SCSS TUTAJ]
Poniżej podaję cztery miksy Sass. Będziesz musiał dostosować ich ustawienia do swoich potrzeb.
Po zakończeniu gry z ustawieniami po prostu wywołaj jeden mixin - czyli: + config-and-run-font-generator () . Aby uzyskać więcej informacji, zobacz poniższy kod i komentarze.
Wydaje mi się, że można to zrobić automatycznie w przypadku zapytania o media, tak jak w przypadku tagów nagłówka, ale wszyscy używamy różnych zapytań o media, więc nie byłoby to odpowiednie dla wszystkich. Korzystam z koncepcji projektowania mobilnego, więc właśnie tak bym to zrobił. Skopiuj i użyj tego kodu.
KOPIUJ I WKLEJ MIESZANKI DO SWOJEGO PLIKU:
KONFIGURUJ WSZYSTKIE MIESZANKI NA SWOJE POTRZEBY - GRAJ Z NIM! :) A NASTĘPNIE ZADZWOŃ NA SWOIM RZECZYWISTYM KODIE SASS Z:
To wygeneruje ten wynik. Możesz dostosować parametry, aby generować różne zestawy wyników. Ponieważ jednak wszyscy używamy różnych zapytań o media, niektóre miksy będziesz musiał edytować ręcznie (styl i media).
Wygenerowany CSS:
źródło
Używam tych klas CSS, dzięki czemu mój tekst jest płynny na dowolnym ekranie:
źródło
źródło
Istnieją następujące sposoby osiągnięcia tego celu:
Jednostki te dokonają automatycznej zmiany rozmiaru w zależności od szerokości i wysokości ekranu.
źródło
Możesz dostosować rozmiar czcionki, jeśli definiujesz go w vw (szerokość rzutni). Jednak nie wszystkie przeglądarki obsługują to. Rozwiązaniem jest użycie JavaScript do zmiany podstawowego rozmiaru czcionki w zależności od szerokości przeglądarki i ustawienia wszystkich rozmiarów czcionek w%.
Oto artykuł opisujący sposób tworzenia elastycznych czcionek: http://wpsalt.com/responsive-font-size-in-wordpress-theme/
źródło
Znalazłem to rozwiązanie i działa dla mnie bardzo dobrze:
źródło
Jednym ze sposobów rozwiązania problemu z tekstem, który wygląda dobrze zarówno na komputerze stacjonarnym, jak i telefonie komórkowym / tablecie, jest ustawienie rozmiaru tekstu na jednostki fizyczne, takie jak fizyczne centymetry lub cale, które nie zależą od PPI ekranu (punktów na cal).
W oparciu o tę odpowiedź poniżej znajduje się kod, którego używam na końcu dokumentu HTML dla elastycznego rozmiaru czcionki:
W powyższym kodzie elementy innej klasy mają przypisane rozmiary czcionek w jednostkach fizycznych, o ile przeglądarka / system operacyjny jest poprawnie skonfigurowany do PPI jego ekranu.
Czcionka jednostki fizycznej jest zawsze niezbyt duża i niezbyt mała, o ile odległość od ekranu jest zwykle (odległość czytania książki).
źródło
Rozmiar tekstu można ustawić za pomocą
vw
jednostki, co oznacza „szerokość rzutni”. W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
Do mojego osobistego projektu użyłem vw i @meida. Działa idealnie.
źródło
Użyj tego równania:
Dla czegokolwiek większego lub mniejszego niż 1440 i 768 możesz albo nadać mu wartość statyczną, albo zastosować to samo podejście.
Wadą rozwiązania vw jest to, że nie można ustawić współczynnika skali, powiedzmy, że 5vw przy rozdzielczości ekranu 1440 może mieć rozmiar czcionki 60px, rozmiar czcionki pomysłu, ale kiedy zmniejszysz szerokość okna do 768, może to skończyć się 12 pikseli, a nie minimum, którego chcesz.
Dzięki takiemu podejściu możesz ustawić górną i dolną granicę, a czcionka będzie się skalować między nimi.
źródło
Możemy użyć calc () z css
Wzór matematyczny to calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))
Codepen
źródło
Obawiam się, że nie ma łatwego rozwiązania w zakresie zmiany rozmiaru czcionek. Możesz zmienić rozmiar czcionki za pomocą zapytania o media, ale technicznie nie zmieni się płynnie. Na przykład, jeśli używasz:
Twój
font-size
będzie 3em zarówno na 300 pikseli i 200 pikseli szerokości. Ale potrzebujesz mniejszejfont-size
szerokości 200 pikseli, aby idealnie reagować.Więc jakie jest prawdziwe rozwiązanie? Jest tylko jeden sposób. Musisz utworzyć obraz PNG (z przezroczystym tłem) zawierający tekst. Następnie możesz łatwo dostosować swój obraz (na przykład: szerokość: 35%; wysokość: 28 pikseli). W ten sposób Twój tekst będzie w pełni reagował na wszystkie urządzenia.
źródło
Po wielu wnioskach skończyłem z tą kombinacją:
źródło
Spróbuj tego
html { font-size: min(max(16px, 4vw), 22px); }
mam to z https://css-tricks.com/simplified-fluid-typography/
źródło
Oto coś, co zadziałało dla mnie. Testowałem to tylko na iPhonie.
Niezależnie od tego
h1
, czy masz tagih2
, czyp
umieść to wokół tekstu:To renderuje 22-punktowy tekst na pulpicie i jest nadal czytelny na iPhonie.
źródło