Ramki - reponsywność

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,100 p.) Na E14 wprowadzili responsywność, że z ramek korzystasz?

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

tak tak

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

A jak mam rozwiązać mój problem

2 odpowiedzi

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 dzięki za pomoc

odpowiedź 17 sierpnia 2017 przez Ehlert Ekspert (214,100 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,960 wizyt

Jak dopasować ramkę do długości i szerokości przykładowego pudelka div (czy filmu yt) ?

pytanie zadane 24 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

+1 głos

1 odpowiedź 769 wizyt

Jak wyświetlać facebooka w ramce na stronie?

pytanie zadane 14 stycznia 2018 w HTML i CSS przez Adrian86452 Użytkownik (690 p.)

0 głosów

1 odpowiedź 533 wizyt

CSS/Skalowanie

pytanie zadane 5 lutego 2018 w HTML i CSS przez Olek Szymański Użytkownik (920 p.)

Ramki - reponsywność

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci