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

question-closed Ramki - reponsywność

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
538 wizyt
pytanie zadane 17 sierpnia 2017 w HTML i CSS przez SzukającyPrzygód Bywalec (2,310 p.)
zamknięte 18 sierpnia 2017 przez SzukającyPrzygód

Witam

Chciałbym żeby na stronie od 1200px metodą


@media screen and (min-width: 1200px) and (max-width: 1000px) {

	
}

pojawiaja się ramka którą wywojuje się taką metodą

<iframe src="index.html" width="100%" height="110px" frameborder="0" ></iframe>

a od 1600 px żeby na stronie taką metodą


@media screen and (min-width: 1600px) and (max-width: 1200px) {

	
}

pojawiała się ramka wywoływana taką metodą

<iframe src="index_2.html" width="100%" height="110px" frameborder="0"></iframe>

i jak mam to wprowadzić na stronie aby sprawnie działało ?

komentarz zamknięcia: uzyskanie odpowiedzi
1
komentarz 17 sierpnia 2017 przez Ehlert Ekspert (214,270 p.)

Na E14 wprowadzili responsywność, że z ramek korzystasz? laugh

komentarz 17 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)

tak tak smiley

komentarz 17 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)
A jak mam rozwiązać mój problem

2 odpowiedzi

+1 głos
odpowiedź 18 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)
wybrane 18 sierpnia 2017 przez SzukającyPrzygód
 
Najlepsza

Zrobiłbym to w ten sposób, że obu nadałbym po id

<iframe id="example" src="index.html"></iframe>

<iframe id="example2" src="index_2.html"></iframe>

A w CSS dodałbym coś takiego

@media screen and (min-width: 1200px) and (max-width: 1000px) {

#example2 {

display: none;

}

#example {

/* Tutaj styl dla wyświetlanej ramki */

}

}

@media screen and (min-width: 1600px) and (max-width: 1200px) {

#example {

display: none;

}

#example2 {

/* Tutaj styl dla drugiej wyświetlanej ramki */

}

}

@EDIT

I nie dodawaj inline CSS'a do elementów - od tego są arkusze styli.

komentarz 18 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)

Jak daję w html

<iframe id="example" src="index.html"></iframe>

<iframe id="example2" src="index_2.html"></iframe>

to wyświetlają mi się dwie ramki mimo że dodaje plik z css który ma to odrębiać

komentarz 18 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)
Pokaż kod, z lustrzanej kuli jeszcze wróżyć się nie nauczyłem. :D
komentarz 18 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)
<html>
<head>

 <style type="text/css">
@media screen and (min-width: 1200px) and (max-width: 1000px) {

#example2 {

display: none;

}

#example {


}

}

@media screen and (min-width: 1600px) and (max-width: 1200px) {

#example {

display: none;

}

#example2 {

/* Tutaj styl dla drugiej wyświetlanej ramki */

}

}
</style>
</head>
<body>

<iframe id="example" src="index.html"></iframe>

<iframe id="example2" src="index_2.html"></iframe>
</body>
</html>

 

komentarz 18 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)

Przede wszystkim, nie wiem co to za dziwne breakpointsy wybrałeś, ale one nic nie znaczą. Jeśli już, to powinny być zapisane na odwrót min-width: 1000px, max-width: 1200px, wcześniej nie zwróciłem na to uwagi. 

Druga sprawa - nie wiem w jakim celu w tagu <style> wrzucasz text/css.

Trzecia sprawa - zalecam korzystanie z zewnętrznych styli CSS.

<html>
	<head></head>
	<body>

		<style>

		@media screen and (min-width: 1200px) {
		 
			#example2 {
			display: none;
			}
			 
			#example {

			}

		}
		 
		@media screen and (max-width: 1200px) {
		 
			#example {
			display: none;
			}

			#example2 {

			}
		 
		}

		</style>
		 
		<iframe id="example" src="index.html">
		</iframe>
		 
		<iframe id="example2" src="index_2.html">
		</iframe>

	</body>
</html>

 

komentarz 18 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)

Po prostu z pośpiechu laugh dzięki za pomoc

+1 głos
odpowiedź 17 sierpnia 2017 przez Ehlert Ekspert (214,270 p.)
@media screen and (min-width: 1200px) and (max-width: 1000px) {
    iframe{
        //...tutaj style
    }     
}

To samo zrób dla reszty rozdzielczości. Pamiętaj o:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Nie używaj atrybutów width i height.

komentarz 17 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)

A gdzie mam dać

iframe src="index.html"

 

komentarz 18 sierpnia 2017 przez SzukającyPrzygód Bywalec (2,310 p.)

To dość ważny aspekt więc jak mam go wprowadzić w

@media screen and (min-width: 1200px) and (max-width: 1000px) {
    iframe{
        //...tutaj style
    }     
}

 

Podobne pytania

0 głosów
2 odpowiedzi 1,972 wizyt
+1 głos
1 odpowiedź 772 wizyt
pytanie zadane 14 stycznia 2018 w HTML i CSS przez Adrian86452 Użytkownik (690 p.)
0 głosów
1 odpowiedź 556 wizyt
pytanie zadane 5 lutego 2018 w HTML i CSS przez Olek Szymański Użytkownik (920 p.)

93,103 zapytań

142,076 odpowiedzi

321,560 komentarzy

62,444 pasjonatów

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 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...