jeśli chcęJak można pisać zapytania o media dla wielu rozmiarów ekranu?
body {font-size:18 px} do 1900 i powyżej
body {font-size:16 px} za 1024 i 1900
body {font-size:14 px} do 768 do 1023
body {font-size:12 px} do 320 do 767
body {font-size:11 px} do 0 do 320
Właśnie podałem i przykład pytania.
ten powinien wykonać pracę
@media only screen and (min-width: 320px) { body{ font-size: 12px; } }
@media only screen and (min-width: 768px) { body{ font-size: 14px; } }
@media only screen and (min-width: 1024px) { body{ font-size: 16px; } }
@media only screen and (min-width: 1900px) { body{ font-size: 18px; } }
kocham this blog/website, ponieważ jest to dobre źródło informacji dla CSS3 i ładne sztuczki:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Więc szerokość urządzenia ma być używana na urządzenia mobilne i tablety? –
Wydaje mi się, że różni się w przypadku tabletów, ponieważ niektóre działają jak przeglądarki mobilne (na przykład iPad), a inne nie. – Blender
Można użyć zapytań o media. Na przykład twój rozmiar czcionki dla 1024 do 1900 roku będzie ustawiony tak:
@media screen and (max-width: 1900px){
body{font-size:16px;}
}
dla dokładniejszego wyjaśnienia patrz responsive web design: http://www.alistapart.com/articles/responsive-web-design/
Czy nie zastąpi innych niższych rozmiarów ekranu? –
Oni to napisałem, tak. Będziesz musiał napisać inne selektory dla mniejszych rozdzielczości lub dodać 'i (min-szerokość: 1200px)' – hradac
tego kodu.
@media only screen and (max-width:319px) { body{font-size:11px}}
@media only screen and (min-width:320px) and (max-width:767px) { body{font-size:12px} }
@media only screen and (min-width:768px) and (max-width:1023px) { body{font-size:14px} }
@media only screen and (min-width:1024px) and (max-width:1899px) { body{font-size:16px} }
@media only screen and (min-width:1900px) { body{font-size:18px} }
Dlaczego używasz 'tylko ekranu' i widziałem, że niektórzy ludzie używają' max-width'. –
Zawsze możesz dołączyć inny arkusz stylów dla każdej rozdzielczości ekranu. Lub po prostu zmniejszyć wszystko w oparciu o EM. Sprawdź to w celach informacyjnych. http://css-tricks.com/css-media-queries/ – wwwroth
Pamiętaj, że nadal potrzebujesz selektorów w blokach multimediów. Więc nie będzie to po prostu 'font-size: 12px', który ma wyglądać tylko @media i (min-width: 320px) {body {font-size: 12px}}' – hradac