Na jaké šířky optimalizovat responzivní web
Ahoj,
snažil jsem se najít jaká jsou nejčastější používaná rozlišení v mobilech, ale žádných konkrétních hodnot jsem se nedobral.
Tak jsem to rosekal podle svého uvážení
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1014px)" href="styl-mobil.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 790px)" href="styl-mobil-1.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 750px)" href="styl-mobil-2.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 710px)" href="styl-mobil-3.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 630px)" href="styl-mobil-4.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 470px)" href="styl-mobil-5.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 350px)" href="styl-mobil-6.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 310px)" href="styl-mobil-7.css" />
Nevím, jestli jsem to nepřehnal. Jeslit se už třeba na rozlišení menší jak 240 úplně nevykašlat.
PageSpeed Insights se tolik stylů moc nelíbi.
Děkuji.
To je trochu moc. V praxi se používají nejčastěji tři - pro mobily, pro tablety, pro počítače. To rozdělení je samozřejmě přibližné, protože ta rozlišení a či velikosti obrazovky se můžou částečně překrývat.