 [porada] Design Responsywny |
  |
| [porada] Design Responsywny |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 19 Pomógł: 0 Dołączył: 24.11.2015 Ostrzeżenie: (0%) 
 |
Witam.
Tworzę one page na WordPress i napotkałem pewiem problem. Mimo że bawię się już od dłuższego czasu z php, html i css to dopiero teraz postanowiłem stworzyć szablon który będzie ładnie wyglądał WSZĘDZIE. Dosłownie wszędzie. Na ekranach laptopów, dużych monitorach PCtów, telefonach, tabletach czy nawet na ogromnych telewizorach. Mój szablon wygląda już dobrze na komputerach (laptopach, PC) jednak mam problem z telefonami. Nie mogę znaleźć pożądnego emulatora urządzeń mobilnych. Wbudowany emulator w GoogleChrome oszukuje. Pokazuje jedno a w telefonie o identycznej rodzielczości wyświetla się co innego. Ustawienie w css marginesów, paddingów, szerokości i wysokości w procentach jest oczywiste. Jednak jak ogarnąć czcionki? Mój największy problem w tej chwili to skalowanie czcionki. Zastanawiałem się jak do tego podejść. Myślę, że najłatwiejszym sposobem będzie skalowanie czcionki względem elementu, w którym umieszczony jest tekst - Np. element ten ma w danej chwili 600px szerokości a skrypt przypisuje dla niego font-size np. 5% szerokości elementu czyli 30px. W JS dopiero raczkuję, dlatego tutaj piszę. Czy ktoś spotkał się z jakimś skryptem który to umożliwia? |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 809 Pomógł: 1828 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
saucelabs.com
browserstack.com |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 19 Pomógł: 0 Dołączył: 24.11.2015 Ostrzeżenie: (0%)
|
Dzięki trueblue (IMG:style_emoticons/default/smile.gif)
Rozwiązałem to w bardzo prosty sposób: Kod <script type="text/javascript"> el = document.getElementById("scale"); x = window.innerWidth || document.documentElement.clientWidth; y = x/2; el.style.fontSize = y + "%"; </script> Dla <body> ustawiłem id="scale" i przechowuję ją w zmiennej el x to wewnętrzna szerokość okna przeglądarki y to połowa szerokości na koniec przypisałem zmienną y do stylu <body> Przy oknie o szerokości 1900px otrzymuję w body font-size: 950%; Następnie w każdym kolejnym elemencie zawartym w <body> font-size ustawiam jako %. Skrypt zadziała przy przeskalowaniu okna i przeładowaniu strony. Do celu jakiego potrzebuję to wystarczy. Zostawiam dla potomnych (IMG:style_emoticons/default/wink.gif) |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 6 809 Pomógł: 1828 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
|
|
|
|
|
|
Aktualny czas: 25.12.2025 - 07:15 |
