Diskuze: @media screen - speciální html stránka pro mobilní zařízení

albertpatera

Tvůrce

albertpatera:4.5.2015 21:47

Ahoj,

mám dotaz...nešla by udělat speciální html stránka pro mobilní zařízení ? (pro rozlišení 800px x 400px)
protože když dám

@media (max-width: 800px) {
  #hlavni  {
  background-image: url("images/btn.png");
  }



@media (max-width: 800px) {
  #hlavni a {
  background-image: url("images/btn_blank.png");
  }

a v HTML mám :

<div id="hlavni">



            <a href="#menu">Více informací</a>
       </div>

Kod nějak nefunguje :-(
Chci, aby odkaz měl obrázek se šipkou dolu (pro mobilní zařízení), ale kdybych to udělal, že bych do tagu <a>, vložil tag <img>, tak zase ztratím ten odkaz Více informací, který tam je pro normální počítače. Nemá někdo nějaký návrh, jak to udělat? díky

Editováno 4.5.2015 21:48

Odpovědět

4.5.2015 21:47

Jan Lupčík

Tvůrce

Jan Lupčík:4.5.2015 21:51

Proč tam máš 2× max-width?

Dej to odkazu třeba obrázek a text a na mobilu zakryj text a na počítači ho odkryj a zakryj šipku.

display: none; /* zakrytí */
display: inline; /* zobrazení */

Editováno 4.5.2015 21:53

Nahoru Odpovědět

4.5.2015 21:51

TruckersMP vývojář

albertpatera

Tvůrce

albertpatera:4.5.2015 22:10

nefunguje.....ale stejně mi nevezme @media screen divi, pritoze když dám :

@media (max-width: 800px) {
   #hlavni a {
   font-size:25px;
   }

, tak se mi to v mobilu vůbec nezmění

Nahoru Odpovědět

4.5.2015 22:10

Tomáš Maňhal

Člen

Tomáš Maňhal:4.5.2015 22:15

Viewport máš v hlavičce definovaný?

Nahoru Odpovědět

4.5.2015 22:15

TomasGlawaty

Člen

TomasGlawaty:4.5.2015 22:20

podle syntaxe, používáš SASS?
a máš ten @media blok "zahnízděný" v bloku #hlavni ?

#hlavni{
   // kod pro hlavní
   @media (max-width: 800px){
      // breakpoint pro #hlavni
   }
   a{
     // kod pro #hlavni a
     @media (max-width: 800px){
      // breakpoint pro #hlavni a
      }
   }
}

takhle by to podle mě mohlo být...

Editováno 4.5.2015 22:22

Nahoru Odpovědět

4.5.2015 22:20

Honza Bittner

Tvůrce

Honza Bittner:4.5.2015 22:22

Ujisti se, že se tvé @media podmínky nepřekrývají a že máš v hlavičce HTML nastaven viewport - viz http://www.itnetwork.cz/…zivni-design.

Určitě můžeš udělat stránku pro mobily a pc zvlášť, ... ale ... nedoporučuji. Zaprvé to musíš odchytávat na serveru a podle toho dodávat určitou šablonu. Budeš muset udržovat 2 stránky. Stránka nebude responzivní -> nemůžeš na PC zmenšit tak, aby se ti správně zobrazila...

Btw. ujisti se také, že máš správně závorky ->

@media (max-width: 800px) {
  #hlavni  {
    ... kód ...
  }
}

Editováno 4.5.2015 22:24

Nahoru Odpovědět

4.5.2015 22:22

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

TomasGlawaty

Člen

TomasGlawaty:4.5.2015 22:36

Aha SASS asi nepoužíváš, jsem už asi přepracovaný

musíš se ujistit, že selektory, které jsou zapsané v media bloku jsou zapsané úplně stejně i "normálním" stylu.
Jinak na tohle stačí jenom jeden media blok.

@media (max-width: 800px) {
   #hlavni  {
      // kód
   }
   #hlavni a{
     // kód
   }
}

v tvojí "ukázce" kódu chybí ukončovací závorky media bloků

Nahoru Odpovědět

4.5.2015 22:36

albertpatera

Tvůrce

albertpatera:4.5.2015 22:51

Bohužel jsem chybu nenašel

Pro jistotu posílám celé CSS pro mobily:

/* CSS Document */

@media (max-width: 800px) {
  body {
  background: url('images/background_mobile.png') repeat-x;
  }

@media (width: 400px) {
  h1 {
  font-size:-100px;
  margin-top:150px;
  text-shadow: 3px 3px 3px #aaaaaa;
  }

@media (max-width: 800px) {
  h1 {
  font-size:-500px;
  margin-top:100px;
  text-shadow: 3px 3px 3px #aaaaaa;
  }

div {
    font-size:26%;

}


@media (max-width: 400px) {
  #hlavni  {
  width:50px;
  }



@media (max-width: 800px) {
  #hlavni a {
  width:50px;
  }

@media (max-width: 800px) {
  img {
  display:inline;
  }

@media (max-width: 800px) {
  #hlavni a {
             font-size:25%;
  }
@media (max-width: 800px) {
   a {
    display: none;
   }

@media screen and (max-width: 800px) {
  .galerie a img {
    width:1000px;
  }
}

a HTML

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
  <meta charset="UTF-8">
  <meta name="author" content="Albert Patera">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="stylesheet" href="mobile.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Albert Patera</title>
  </head>
  <body>
       <h1>Albert Patera</h1>











            <div class="galerie">
            <a href="#menu"><img src="http://bertuvweb.8u.cz/images/btn.png">Více informací</a>
            </div>
       <div id="menu">
          <ul>
            <li><a href="#omne"  title="O mně">O mně</a></li>
            <li><a href="#skills"  title="Co umím">Dovednosti</a></li>
            <li><a href="#price"  title="Ceník služeb">Ceník</a></li>
            <li><a href="#contact" title="Kontakt">kontakt</a></li>
           </ul>
       </div>

       <div id="container">
         <div id="omne">
          <h2>O mně</h2>
          <p>Lorem ipsum dolor sit amet consectetuer id et amet nibh Vestibulum. Dolor id et enim id eleifend dolor vitae feugiat et tellus. Metus Maecenas libero Sed Quisque pretium Aliquam leo velit consectetuer vel. Donec suscipit ac hendrerit senectus sem Vestibulum pretium id rutrum mus. Et orci laoreet justo netus eu nunc urna augue convallis vitae. Pharetra vel Curabitur ut massa.</p>

           </div>
       </div>
































       <div id="home">
        <p>gjhghgggjhgjgjhghg</p>
       </div>
  </body>
</html>

fakt nevim, kde je chyba

Nahoru Odpovědět

4.5.2015 22:51

Tomáš Maňhal

Člen

Tomáš Maňhal:4.5.2015 23:21

Nemáš uzavřené závorky

Nahoru Odpovědět

4.5.2015 23:21

Honza Bittner

Tvůrce

Honza Bittner:4.5.2015 23:25

Nemáš ukončené závorky... Btw. v čem děláš? By tě to mělo upozornit.

Také to "všechno" můžeš spojit pod jedno @media, tedy např.

@media (max-width: 800px) {
  #hlavni a {
    width:50px;
  }

  img {
    display:inline;
  }

  #hlavni a {
    font-size:25%;
  }

  a {
    display: none;
  }
} /* <-- konec @media */

Udělej to všechno tímto způsobem a pak dej vědět co a jak. Nejlépe nahraj kód na nějakou webovku, kde se to dá projet online.

@media (width: 400px)

A toto ti nic tuším neudělá - to bys musel být přesně na 400px. Využívej max-* a min-*.

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

4.5.2015 23:25

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

albertpatera

Tvůrce

albertpatera:5.5.2015 0:08

webovka je : http://bertuvweb.8u.cz/

a jinak to nic nedělá :-(

Nahoru Odpovědět

5.5.2015 0:08

Honza Bittner

Tvůrce

Honza Bittner:5.5.2015 0:15

Bože...

Udělej si prostě sandbox, kam si dáš 2 divy, které si vyzkoušíš s @media a naučíš se to na nich...

Také si spoj ty 2 .css soubory, ať v tom nemáš zmatek. Spoj si také konečně všechny stejné @media.

Nahoru Odpovědět

5.5.2015 0:15

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:5.5.2015 0:18

Btw. ve Chromu dej CTRL + SHIFT + I (otevře se ti DevTools) -> klikni na ikonku mobilu a nahoře se ti zobrazí takové lišty s označením, jak ti vychází jednotlivé @media "zalomení".

Nahoru Odpovědět

5.5.2015 0:18

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

TomasGlawaty

Člen

TomasGlawaty:5.5.2015 7:02

Četl jsi vůbec co jsme ti psali? chybí ti ukončovací závorky u media bloků.
Déle máš nesmyslně mnoho stejných media pravidel.
Jak ti radí Honza, spoj to normálně do jednoho souboru, a stejné media taky.

tady máš "ukázku", z toho to snad pochopíš:
http://jsfiddle.net/4k0d65up/

Editováno 5.5.2015 7:04

Nahoru Odpovědět

5.5.2015 7:02