Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

HTML a CSS HTML a CSS @media screen - speciální html stránka pro mobilní zařízení American English version English version

Aktivity (1)
Avatar
albertpatera
Redaktor
Avatar
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
Avatar
IT Man
Redaktor
Avatar
Odpovídá na albertpatera
IT Man: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
Cokoliv a kdokoliv může jednou uspět.
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na IT Man
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
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na albertpatera
tomasmanhal:4.5.2015 22:15

Viewport máš v hlavičce definovaný?

Nahoru Odpovědět  +1 4.5.2015 22:15
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
TomasGlawaty
Člen
Avatar
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
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na albertpatera
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  +1 4.5.2015 22:22
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
TomasGlawaty:4.5.2015 22:36

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

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
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na Honza Bittner
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
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na albertpatera
tomasmanhal:4.5.2015 23:21

Nemáš uzavřené závorky

Nahoru Odpovědět 4.5.2015 23:21
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Honza Bittner
Šupák
Avatar
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í
Řešení problému
Nahoru Odpovědět 4.5.2015 23:25
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na Honza Bittner
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
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na albertpatera
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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na albertpatera
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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
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
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.