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

Avatar
albertpatera
Redaktor
Avatar
albertpatera:

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:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na IT Man
albertpatera:

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:

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:

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
Redaktor
Avatar
Odpovídá na albertpatera
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
TomasGlawaty:

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:

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:

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
Redaktor
Avatar
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
albertpatera
Redaktor
Avatar
 
Nahoru Odpovědět 5.5.2015 0:08
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na albertpatera
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na albertpatera
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
TomasGlawaty:

Č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.