Hogyan tudom elérni, hogy a weboldal több eszközön is jól jelenjen meg?
Szia!


Ajánlom figyelmedbe a CSS media query-ket. Az alap koncepció az az, hogy képernyő szélesség alapján állapítjuk meg, hogyan kell megjelennie a tartalomnak. Itt lenne egy példa:



```
.elem {
  display: inline-block;
  width: 50%;
}
/* Maximum képernyő méret amin lefut ez a css kód, ellenkető esetben a fent látható fog lefutni */
@media only screen and (max-width: 768px) {
    /* Mobilokon */
    .elem {
        width: 100%;
    }
}

```

Itt lenne egy részletesebb leírás a CSS selectorokról: <https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
Hiányzik a HTML headből a   

`<meta name="viewport" content="width=device-width, initial-scale=1">` tag  

 és így az eszközszimulátor alakít az oldalad megjelenítésén egy adagot. 


Ha ezt hozzáadod, akkor (annak ellenére, hogy elsőre úgy tűnik majd, hogy sokkal jobban szétesett az oldal), úgy fog viselkedni az oldalon a méretezés, ahogyan a kódod alapján szeretnéd. Én iphone-ról tudok nyilatkozni, de gondolom az androidos telefonok is hasonlóan működnek. Vannak olyan feladatok, ahol a fordítást előre megadott szavak közül kell kiválasztani helyes sorrendben. Azért ez nagy könnyítés, a weben ilyen nincs, ott meg kell azért dolgozni, hogy helyesen fordíts le egy mondatot, de szerintem ezáltal talán jobban is rögzül.
Ha itthon vagyok, akkor mindig a webes változatot használom, akárhol máshol lehet telefonról. Szia.


Lehet :)


Például így: @media screen and (min-width: 480px) and (max-width: 960px) { ... } Készítem. Érdemes megnézni ezt a videómat.  

<https://www.youtube.com/watch?v=9pt8498w9O4&list=PLwXxAxAEOlGgLDpzx1zVeSEOEFx257bDn&index=4>  

<https://www.youtube.com/watch?v=9pt8498w9O4&list=PLwXxAxAEOlGgLDpzx1zVeSEOEFx257bDn&index=4> esetleg nem használsz a böngésződben Adblock vagy NoScript bővítményeket? ha igen akkor ezen az oldalon vedd enyhébbre a beállításokat Firefoxban és Chromeban jó. Próbáld ki!


Ha kiírja, hogy sikeresen ugrottad a szintet, akkor teljesítettnek kell, hogy vegye. Pl.:


![üzlet](http://i58.tinypic.com/2v3g6k2.png) Tudjuk, hogy tanárként és szülőként most elárasztanak az információk. Talán úgy is érzed, elveszel a rengeteg lehetőség között. Egyszerre kellene elsajátítanod és élesben alkalmaznod a digitális tanítás és a távmunka kompetenciáját is. Késlekedés nélkül.

**Öncélú ötletelgetés helyett mi cselekszünk.**

**Nem fejlesztünk új oktatási platformot. Újabb szoftvert sem.**

**Nem készítünk még egy tantárgyi videót.**

**Ehelyett segítünk átlátni a káoszt: módszertani és technikai supportot nyújtunk a már létező rendszerek használatához.**

Ezért **4 csapatot hozunk létre, és minden feladatra EGY megoldást, egy technikai csomagot ajánlunk. Egyetlenegyet.** Ettől el lehet térni, de önmagában vezérfonál.

Pedagógusként **csak azt kell eldöntened, melyik csapat segítségét kéred**.

* A Moodle csapat pedagógiai vezetője Balogh Csaba, a keszthelyi Premontrei Szakgimnázium, Szakközépiskola és Kollégium igazgatója.
* A Microsoft Office 365 csapat pedagógiai vezetője Havassy András, a budapesti II. Rákóczi Ferenc Gimnázium földrajz tanára, Microsoft pedagógiai szakértője.
* Az Alternatív eszközök csapat pedagógiai Koren Balázs, a Fazekas Mihály Gimnázium volt matematika tanára, a Telenor Hipersuli szakmai vezetője.
* Az alsósokat pedig Kurucz Mária szuperpedagógus, a Szent Imre Katolikus Általános Iskola tanára, a Telenor Hipersuli oktatója fogja segíteni felkészíteni.

**Minden csapatban van távmunka szakértő, és ha választottál, az iskoládhoz rendelünk majd egy önkéntes tanácsadót is.**

**LEHET, hogy már használtad** valamelyik programot, és egyszerűen tudsz dönteni: a 4 közül melyik megoldásunkat kéred.

**HA MÉG NEM sokat mondanak neked ezek módszerek**, regisztrálj az amanoba.com-on és figyeld részletes tájékoztatásainkat. Készítem. Ebben a videómban magyarázom is:  

<https://www.youtube.com/watch?v=j3pI9tPn30I&list=PLwXxAxAEOlGi9V6gg5-bKzSjBVAQMubor&index=2> Főoldalon valamelyik zászlóra kattintasz. 3 vagy 4 módon is meg lehet tenni. Szia ![](https://ehazi.hu/images/smiley/happy.png)  

  

Az alábbi oldalon láthatod, hogy miként kell, sőt ki is tudod próbálni.  

<https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image>