CSS - reponsywny grid

pytanie zadane 24 kwietnia 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

Witam!

Mam pytanie jak założyć media query dla diva, którego szerokością steruje grid.

<div class="col-4">.....</div> //Tutaj div zajmuje mi 25% szerokości

Chciałbym, żeby dla breakpoint max-width/: 767px, szerokość diva zmieniła się na 50% czyli .col-6

W jaki sposób zapisać regułę media query?

3 odpowiedzi

odpowiedź 25 kwietnia 2017 przez pablop76 VIP (123,180 p.)
wybrane 25 kwietnia 2017 przez kralcz88

Najlepsza

Witam. NIe zapomnij dodać <meta name="viewport" content="width=device-width, initial-scale=1.0">

Tak wygląda szkielet css.

grid na podstawie https://www.w3schools.com/css/css_rwd_intro.asp

Jak doczytasz dalej zastosowano zasadę first mobile i odwrócone media. Tzn media queries zastosowana dla monitorów a domyślne stylowanie dla tabletów itp.

odpowiedź 24 kwietnia 2017 przez Eimens Maniak (69,240 p.)

Korzystasz z BS'a?

Robi się coś takiego:

<div class="col-sm-6 col-md-5 col-lg-6">zawartość</div>

col-sm-6 - sm oznacza się szerokość elementu dla małego ekranu (small).

jeżeli chcesz żeby na małych urządzeniach element miał szerokość 100% to do diva dodajesz col-xs-12 (dla bardzo małych ekranów), a dla większych miał 6 to dajesz col-md-6 i tak dalej.

http://getbootstrap.com/css/#grid-media-queries

komentarz 24 kwietnia 2017 przez kralcz88 Obywatel (1,810 p.)

Nie korzystam z Bootstrapa w tym projekcie, ale samemu napisze sobie regułę dla klasy col-sm-6.

Dzięki za podpowiedź!

odpowiedź 25 kwietnia 2017 przez hoktaur Pasjonat (22,250 p.)

Coś takiego ?:

<!doctype html>
<html lang=”pl”>
<head>
	<title>eMagi</title>

	<meta charset="UTF-8">

	<meta name="description" content="Opis naszej strony">
	<meta name="keywords" content="Tutaj słowa kluczowe oddzielone przecinkiem">

	<!--[if lt IE 9]>
	    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="./CSS/desktop.css" />
  <link rel="stylesheet" href="./CSS/clock.css" />

  <style>
    .test {
      width: 25%;
      border: 1px solid black; 
    }

    @media screen and (max-width: 767px) {
      .test {
        width: 50%;
      }
    }

  </style>

</head>
<body>

<div class="test"></div>

</body>
</head

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries