Nefunguje responzivní web

V hlavičce mám:

<!doctype html>
<html>
<head>
<meta charset="utf-8" /> 
<title>Pokus</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="files/css/pcindex3.css" rel="stylesheet">
<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 10023px)">
<link href="smartphone.css" rel="stylesheet" media="screen and (max-width: 480px)">
 </head>
 <body>

Proč se mi ale stále načítá pcindex3.css i když stránku otevřu s rozlyšením 1280 ? Proč se to nepřepne na tablet.css? Už nevím co s tím. Poradíte mi prosím?

Předmět	Autor	Datum
• Pouzij jen jedno CSS pro vse pres <Media Queries>. V CSS pak pouzij kod typu : # Phone only scree… nový XoXoChanel 05.08.2015 21:13	XoXoChanel	05.08.2015 21:13
A mam nechat teda v hlavičce toto? <meta name="viewport" content="width=device-width, initial-scale… nový jitkaa23 05.08.2015 21:15	jitkaa23	05.08.2015 21:15
• Osobne bych nechal meta tak jak ma byt a v CSS (jiz mi to delalo bordel, pri pouziti s @media): K… poslední XoXoChanel 05.08.2015 21:23	XoXoChanel	05.08.2015 21:23
Nemělo by být pořadí stylů opačně? Nejprve Smartphone, pak tablet a nakonec PC, které se uplatní až… nový Jan Fiala 05.08.2015 21:14	Jan Fiala	05.08.2015 21:14

• Pouzij jen jedno CSS pro vse pres <Media Queries>.
V CSS pak pouzij kod typu :

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

• Vyhledej si na internete cody typu :

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){

A mam nechat teda v hlavičce toto?

A do toho pcindex3.css dám ty 3 styly jo?

• Osobne bych nechal meta tak jak ma byt a v CSS (jiz mi to delalo bordel, pri pouziti s @media):

Kuprikladu pro telefon:

@media only screen and (min-device-width: 480px) /* je-li mensi jak 480px , muzes nahradit za max-device, coz je opak, je-li vetsi jak ..*/
{
/* kod nebo vlastnost pro zarizeni s timto rozlisenim */
}

Pro tablet:

@media only screen and (min-device-width: 768px) /* jde pouzit i kombinace (min-width: velikost px) and (max-width:velikost px) */
{
/* kod nebo vlastnost pro zarizeni s timto rozlisenim */
}

Co se odkaz na "style" tyce mas na mysli neco typu : <link rel="stylesheet" media="screen and (max-width: 1280px)" href="male_rozliseni.css" /> ?
(Prvni v poradi zadej <link rel="stylesheet" .. etc, rozliseni pro vsechny a pak az <link rel="stylesheet" media="screen and (max-width: ..)
TiP~ Rozliseni podle zarizeni: http://www.binvisions.com/articles/tablet-smartpho ne-resolutions-screen-size-list/

Nemělo by být pořadí stylů opačně? Nejprve Smartphone, pak tablet a nakonec PC, které se uplatní až když se neuplatní žádný předtím?

Zpět do poradny Odpovědět na původní otázku Nahoru