[CSS]Rozdzielczość 4k na stronach internetowych Opcje

[TakiTaki]

Cześć,
Mam pytanie do osób które zajmują się css. W związku z tym że jestem laikiem postanowiłem wykorzystać bootstrapa aby jak najmniej kombinować z mobilnością strony (przynajmniej miałem taką nadzieję).
Napisałem cały layout niektóre elementy są na sztywno max 70px. Na telefonie i komputerze wszystko wygląda dobrze problem pojawia się gdy chcę odpalić stronę na tv 4k. Wszystko jest bardzo małe jeśli chodzi tekst czy inne elementy i z odległości już jest problem z odczytaniem tekstu.

Postanowiłem że spróbuje poprawić layout od początku zacząłem od 4k i co jakiś czas sprawdzam jak to wyglądu na innych rozdzielczościach. o ile na konkretnej rozdzielczości jest fajnie ułożone to jak idziemy np. na mniejszą to coś zaraz się podnosi i wszystko się rozjeżdża. Poprawianie każdego elementu na stronie wcale mi się nie uśmiecha może znacie jakieś fajne rozwiązania typu bootstrap gdzie przy większych rozdzielczościach wszystko się skaluje czy coś podobnego?

Szczerze mówiąc nie wiem jak to ugryźć żeby było dobrze. Napisałem sam layout pod navbara i jest już 180 linijek kodu, gotowy pod telefony i pc miał coś kolo 430. Obecnie muszę poprawiać każdy element typu input pod 4k i troszkę mniejszą rozdzielczość.

Dzięki za pomoc.

Podrzucam jak wygląda obecnie 4k

[HTML] pobierz, plaintext 
/* For 4K Displays (Ultra HD) */
@media screen and (min-width: 3840px) {
  .navbar {
    background-color: black;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.8vw;
  }
 
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    font-size: 1.3vw;
    color: white;
    text-align: center;
    padding: 100px 40px;
    text-decoration: none;    
  }
 
  .navbar_search_down{
  padding-top: 8%;
  margin-bottom:10px
  }
 
  .navbar_search_icon{
    font-size:16px;
    font-size: 1.3vw;
  }  
 
  .navbar input[type="text"]
  {
    font-size:16px;
    font-size: 1.3vw;
  }
 
  .dark_mode_hidde{
    display: none !important;
  }
  .dark_mode_show{
    display: block !important;
    margin-left: 20px;
    margin-top: 50px;
  }
 
  .toggle-group label{
    font-size: 40px !important;
  }
}
[HTML] pobierz, plaintext 

[trueblue]

Google Twoim przyjacielem: http://benwhitehead.github.io/bootstrap-big-grid/

[viking]

A w ogóle czemu w tym kodzie ciągle powtarzasz dwie wartości?
font-size: 16px;
font-size: 1.3vw;

Jedno nadpisuje drugie.

[TakiTaki]

A w ogóle czemu w tym kodzie ciągle powtarzasz dwie wartości?
font-size: 16px;
font-size: 1.3vw;

Jedno nadpisuje drugie.

Poprawione

a co do
http://benwhitehead.github.io/bootstrap-big-grid/#
Mam problem z wielkością tekstu a nie kolumn dodatkowo bootstrap 4.6 obsługuje max xl dodałem 4k ale to nic nie zmieniło.

[com]

czemu nie użyjesz 5, ona wspiera większe rozdziałki

[trueblue]

com, możesz podać źródło tych informacji?

[trueblue]

com, możesz podać źródło tych informacji?

[gino]

Zapewne @com chodziło o to, że wersja 5 ma dodatkowy 6 poziom siatki: extra extra large ≥1400px

[com]

@trueblue tak jak napisał @gino

[trueblue]

Nie bardzo widzę jak skok progu do 1400px ma się do obsługi rozdzielczości 4K.

[com]

na pewno wygląda lepiej niż kontener 1200 px, ale masz rację mój błąd(pomyliło mi się z 2k) być może kontener tej szerokości jest też za mały, wiec bym dodał po prostu nowy próg albo użył tej biblioteki, ale jako bazę lepiej użyć tak czy tak 5 gdzie jest 6 breakpoint

co do problemu to https://css-tricks.com/optimizing-large-scale-displays/

Ten post edytował com 5.11.2021, 13:34:09