• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna

VPS Starter Arubacloud
+1 głos
176 wizyt
pytanie zadane 20 czerwca 2020 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Witam,
jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności, efekt taki jak w tym przypadku:

strona z efektem o którymi chodzi

2 odpowiedzi

+1 głos
odpowiedź 20 czerwca 2020 przez Bartek12 Mądrala (5,510 p.)
próbowałeś użyć bootstrapa? On służy właśnie do różnych efektów responsywnych na stronie.
0 głosów
odpowiedź 20 czerwca 2020 przez VBService Ekspert (255,800 p.)
edycja 23 czerwca 2020 przez VBService

Jeżeli chcesz to "zaprogramować" mimo wszystko sam. Przy małych projektach, można się pokusić samemu zaprogramować responsywność na swojej stronie. Nie jest moim zamiarem negować bootstrap-a i jego zalet, ale z tego typu rozwiązaniami zawsze dostajemy "nadmiarowy" kod, ponieważ twórcy w tym wypadku bootstrap-a, musieli przewidzieć wszystkie możliwe sytuacje jakie mogą wystąpić w projekcie strony, których ty w swoim projekcie, możesz w ogóle nie wykorzystywać. Drugi powód, trywialny, żeby poćwiczyć i nabyć kolejne umiejętności. wink

Pierwszy krok to w <head> strony musi się pojawić wpis meta o nazwie name="viewport", nie które właściwości (atrybuty) content muszą się pojawić, inne są zależne od Twojego projektu. Responsive Web Design - The Viewport, według Mnie te poniżej to minimum.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


</head>

tu viewport ze strony, którą podałeś za przykład:

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,minimal-ui">

przechodzimy do css-a strony, na początek Ja używam tzw. selektor uniwersalny [ 1 , 2 ]  [ css-selektory ]

<style>
  * {
     padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
     margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
     box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
  }
  html {
     font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
     /* font-size: 14px; 14 pikseli = 1 rem itd. */
  }
</style>

[ css - box-sizing ]   

W przykładzie używam przeglądarki Brave [ silnik: Chromium web browser ]
Uruchamiamy przykładowy plik response.html (kod poniżej) wciskamy F12 i klikamy na ikone [ Toggle device toolbar ]

Uzyskujemy menu (panel?) za pomocą, którego możemy podglądać naszą stronę tak jakby był wyświetlana na urządzeniu mobilnym.

response.html [ wersja surowa ]

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">

    <style>
        * {
            padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
            margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
            box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
        }
        html {
            font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
                /* font-size: 14px; 14 pikseli = 1 rem itd. */
        }
        header {
            height: 100vh;
            color: cornsilk;
            background-color: darkslategrey;
        }
    </style>
    </head>

    <body>
        <header>
            <nav>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </nav>
            <hgroup>
                <h1>Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna</h1>
                <h3>Witam,<br>
                    jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał
                    się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności
                </h3>
            </hgroup>
            <img src="pasja.png">
        </header>
    </body>
</html>

pasja.png

    <style>
        * {
            padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
            margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
            box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
        }
        html {
            font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
                /* font-size: 14px; 14 pikseli = 1 rem itd. */
        }
        header {
            height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
            color: cornsilk;
            background-color: darkslategrey;
            font-family: 'MuseoModerno', cursive;
        }
        header nav {
            position: absolute;
            right: 1%;
            top: 1%;
            font-size: 3rem;
        }
        header hgroup {
            position: absolute;
            top: 5%;
            left: 2%;
        }
        header h1 {
            font-size: 3rem;
        }
        header h3 {
            font-size: 2rem;
            font-weight: 400;
        }
        header img {
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #arrow {
            position: absolute;
            width: 44px;
            height: 44px;
            bottom: 1%;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid white;
            border-radius: 50%;
            font-size: 4rem;
            text-align: center;

        }
        main {
            height: 100vh;
            background-color: darkolivegreen;
        }
    </style>

[ @media ] [ @media (orientation: portrait / landscape ) ]
[ Responsive Web Design - Media Queries ]

    <style>
        * {
            padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
            margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
            box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
        }
        html {
            font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
                /* font-size: 14px; 14 pikseli = 1 rem itd. */
        }
        header {
            height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
            color: cornsilk;
            background-color: darkslategrey;
            font-family: 'MuseoModerno', cursive;
        }
        header nav {
            position: absolute;
            right: 1%;
            top: 1%;
            font-size: 3rem;
            cursor: pointer;
        }
        header hgroup {
            position: absolute;
            top: 8%;
            left: 2%;
            z-index: 1;
        }
        header h1 {
            font-size: 3rem;
        }
        header h3 {
            font-size: 2rem;
            font-weight: 400;
        }
        header img {
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #arrow {
            position: absolute;
            width: 32px;
            height: 32px;
            bottom: 1%;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid white;
            border-radius: 50%;
            font-size: 2.35rem;
            text-align: center;
            cursor: pointer;
        }
        @media (orientation: portrait) {
            h3 span::before {
                content: '\A'; /* Wstaw Enter - podobne do <br> */
                white-space: pre;
            }
            h3 span::after {
                content: '\A';
                white-space: pre;
            }
            #arrow {
                left: 8%;
            }
        }
        @media (orientation: landscape) {
            h3 span::before {
                content: '\A';
                white-space: pre;
            }
            header h3 {
                width: 75%;
            }
            header img {
                width: 36%;
                height: 50%;
            }
        }
        @media (max-width: 360px) {
            header h1 {
                font-size: 2.2rem;
            }
            header h3 {
                font-size: 1.85rem;
            }
        }
        main {
            height: 100vh;
            background-color: darkolivegreen;
        }
    </style>

response.html

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;500;600&display=swap">

    <style>
        * {
            padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
            margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
            box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
        }
        html {
            font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
                /* font-size: 14px; 14 pikseli = 1 rem itd. */
        }
        header {
            height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
            color: cornsilk;
            background-color: darkslategrey;
            font-family: 'MuseoModerno', cursive;
        }
        header nav {
            position: absolute;
            right: 1%;
            top: 1%;
            font-size: 3rem;
            cursor: pointer;
        }
        header hgroup {
            position: absolute;
            top: 8%;
            left: 2%;
            z-index: 1;
        }
        header h1 {
            font-size: 3rem;
        }
        header h3 {
            font-size: 2rem;
            font-weight: 400;
        }
        header img {
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #arrow {
            position: absolute;
            width: 32px;
            height: 32px;
            bottom: 1%;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid white;
            border-radius: 50%;
            font-size: 2.35rem;
            text-align: center;
            cursor: pointer;

        }
        @media (orientation: portrait) {
            h3 span::before {
                content: '\A'; /* Wstaw Enter - podobne do <br> */
                white-space: pre;
            }
            h3 span::after {
                content: '\A';
                white-space: pre;
            }
            #arrow {
                left: 8%;
            }
        }
        @media (orientation: landscape) {
            h3 span::before {
                content: '\A';
                white-space: pre;
            }
            header h3 {
                width: 75%;
            }
            header img {
                width: 36%;
                height: 50%;
            }
        }
        @media (max-width: 360px) {
            header h1 {
                font-size: 2.2rem;
            }
            header h3 {
                font-size: 1.85rem;
            }
        }
        main {
            height: 100vh;
            background-color: darkolivegreen;
        }
    </style>
    </head>

    <body>
        <header>
            <nav>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </nav>
            <hgroup>
                <h1>Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna</h1>
                <h3><span>Witam,</span>
                    jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał
                    się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności
                </h3>
            </hgroup>
            <img src="pasja.png">
            <div id="arrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
        </header>

        <main>
            <!-- reszta kodu strony -->
        </main>
    <script>
        <!-- kod javascript -->
    </script>
    </body>
</html>

komentarz 20 czerwca 2020 przez Comandeer Guru (604,780 p.)

według Mnie te poniżej to minimum.

Zdecydowanie maximum-scale nie powinno się pojawić. Nie ma praktycznie żadnego powodu, dla którego należałoby wyłączać zoom na stronie internetowej, a z miejsca wyklucza to nie tak znowu małą grupę użytkowników. 

 komentarz 23 czerwca 2020 przez VBService Ekspert (255,800 p.)

response.html [ animowana responsywnie strzałka ]

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;500;600&display=swap">

    <style>
        * {
            padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
            margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
            box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
        }
        html {
            font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
                /* font-size: 14px; 14 pikseli = 1 rem itd. */
        }
        header {
            height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
            color: cornsilk;
            background-color: darkslategrey;
            font-family: 'MuseoModerno', cursive;
        }
        header nav {
            position: absolute;
            right: 1%;
            top: 1%;
            font-size: 3rem;
            cursor: pointer;
        }
        header hgroup {
            position: absolute;
            top: 8%;
            left: 2%;
            z-index: 1;
        }
        header h1 {
            font-size: 3rem;
        }
        header h3 {
            font-size: 2rem;
            font-weight: 400;
        }
        header img {
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #arrow {
            position: absolute;
            width: 32px;
            height: 32px;
            bottom: 1%;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid white;
            border-radius: 50%;
            font-size: 2.35rem;
            text-align: center;
            cursor: pointer;
            text-shadow: 0 -10px 0 cornsilk;
            overflow: hidden;
            transition: 1s ease;
        }
        #arrow:hover {
            text-shadow: 0 -10px 0 white;
            color: white;
            border-color: white;
            background-color: black;
        }
        .fa-angle-down {
            animation: 1.4s infinite linear;
        }
        @media (orientation: portrait) {
            h3 span::before {
                content: '\A'; /* Wstaw Enter - podobne do <br> */
                white-space: pre;
            }
            h3 span::after {
                content: '\A';
                white-space: pre;
            }
            #arrow {
                left: 8%;
            }
        }
        @media (orientation: landscape) {
            h3 span::before {
                content: '\A';
                white-space: pre;
            }
            header h3 {
                width: 75%;
            }
            header img {
                width: 36%;
                height: 50%;
            }
        }
        @media (max-width: 360px) {
            header h1 {
                font-size: 2.2rem;
            }
            header h3 {
                font-size: 1.85rem;
            }
        }
        main {
            height: 100vh;
            background-color: darkolivegreen;
        }
    </style>
    </head>

    <body>
        <header>
            <nav>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </nav>
            <hgroup>
                <h1>Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna</h1>
                <h3><span>Witam,</span>
                    jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał
                    się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności
                </h3>
            </hgroup>
            <img src="pasja.png">
            <div id="arrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
        </header>

        <main>
            <!-- reszta kodu strony -->
        </main>
    <script>
        <!-- kod javascript -->
    </script>
    </body>
</html>

 

Podobne pytania

+1 głos
0 odpowiedzi 117 wizyt
Wystające białe tło przy zmniejszaniu strony.
pytanie zadane 27 sierpnia 2021 w HTML i CSS przez ShockWave Bywalec (2,350 p.)
0 głosów
1 odpowiedź 211 wizyt
Cała responsywność strony psuje sie bo zejściu do poziomu small DLACZEGOOO?
pytanie zadane 24 listopada 2020 w Offtop przez Igorek Mądrala (6,290 p.)
0 głosów
2 odpowiedzi 847 wizyt
Niepotrzebnie latające elementy przy zmniejszaniu szerokości okna z 100 %
pytanie zadane 18 lutego 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

92,979 zapytań

141,941 odpowiedzi

321,185 komentarzy

62,305 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...