Common CSS Media Query’s Breekpunten

Ik werk aan een responsieve website met CSS Media-query’s.

Is het volgende een goede organisatie voor apparaten?
Telefoon, iPad (landschap & amp; portret), desktop en laptop, groot scherm

Wat zijn de Common Media Query’s Break-Point-waarden?

Ik ben van plan de volgende breekpunten te gebruiken:

• 320: smartphone portret
• 481: Smartphone Landschap
• 641 of 768 ???: iPad-portret ???
• 961: iPad landschap / kleine laptop ???
• 1025: Desktop en laptop
• 1281: breed scherm

Wat denk je? Ik heb een paar twijfels als ??? punten.

Antwoord 1, Autoriteit 100%

In plaats van te proberen @media-regels op specifieke apparaten te targeten, is het bijzonder praktischer om ze in plaats daarvan op uw specifieke lay-out te baseren. Dat is, druk het regelmatig uw desktopbrowservenster en observeer de natuurlijke breekpunten voor uw inhoud. Het is anders voor elke site. Zolang het ontwerp goed stroomt bij elke browserbreedte, zou het vrij betrouwbaar moeten werken op een schermgrootte (en er zijn er veel en veel van hen.)

Antwoord 2, Autoriteit 49%

Ik gebruik:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}
@media only screen and (max-width: 767px) {
    /* phones */
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

Het houdt dingen relatief eenvoudig en stelt u in staat om iets een beetje anders te doen voor telefoons in de portretmodus (veel van de tijd dat ik merken dat ik verschillende elementen voor hen moet veranderen).

Antwoord 3, Autoriteit 49%

Ik gebruik 4 pauze punten, maar zoals Ralph.m zei, elke site is uniek.
Je moet experimenteren. Er zijn geen magische breakpoints vanwege zoveel apparaten, schermen en resoluties.

Hier gebruik ik als sjabloon.
Ik controleer de website voor elk breekpunt op verschillende mobiele apparaten en het bijwerken van CSS voor elk element (UL, DIV, etc.) niet correct weergeeft voor dat breekpunt.

Tot nu toe werkte die aan meerdere responsieve websites die ik heb gemaakt.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
}    

update

Per september 2015 gebruik ik een betere. Ik ontdek dat deze media-query’s breekpoints met veel meer apparaten en desktop-schermresoluties overeenkomen.

Alle CSS voor desktop op Style.css

Alle media-query’s op responsive.css: alle CSS voor responsieve menu + Media Break Points

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }
@media only screen and (min-width: 480px) and (max-width: 767px){ ... }
@media only screen and (min-width: 768px) and (max-width: 991px){ ... }
@media only screen and (min-width: 992px){ ... }

Update 2019: Per HUGO-opmerking hieronder, heb ik MAX-breedte 1999px verwijderd vanwege de nieuwe zeer brede schermen.

Antwoord 4, Autoriteit 26%

Dit is van CSS-trucs Link

/* 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 */
}

Antwoord 5, autoriteit 9%

Ik kan je vertellen dat ik slechts een enkel breekpunt gebruik op 768 – dat is min-width: 768pxvoor tablets en desktops, en max-width: 767pxom telefoons te bedienen.

Ik heb sindsdien niet meer omgekeken. Het maakt de responsieve ontwikkeling eenvoudig en geen karwei, en biedt een redelijke ervaring op alle apparaten tegen minimale ontwikkelingstijd zonder dat u bang hoeft te zijn voor een nieuw Android-apparaat met een nieuwe resolutie waar u geen rekening mee hebt gehouden.

Antwoord 6, autoriteit 6%

Mediaquery’s voor standaardapparaten

Algemeen voor mobiel, tablets, desktop en grote schermen

1. Mobiele telefoons

/* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }

2. Tabletten

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
         /* Styles */
    }

3. Desktops & laptops

@media only screen 
and (min-width : 1224px) {
    /* Styles */
}

4. Grotere schermen

@media only screen 
and (min-width : 1824px) {
    /* Styles */
}

In detail inclusief landschap en portret

/* 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 */
    }
    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }
    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }
    /* Tablets, 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 */
    }

Referentie

Antwoord 7, autoriteit 6%

Overweeg het gebruik van de breekpunten van twitter bootstrap.
met zo’n enorme acceptatiegraad zou je veilig moeten zijn…

Antwoord 8, autoriteit 4%

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

Antwoord 9, autoriteit 2%

Als je naar je google analytics gaat, kun je zien welke schermresoluties je bezoekers van de website gebruiken:

Publiek > Technologie > Browser & besturingssysteem > Schermresolutie (in het menu boven de statistieken)

Mijn site trekt ongeveer 5.000 bezoekers per maand en de afmetingen die worden gebruikt voor de gratis versie van responsinator.comzijn een vrij nauwkeurige samenvatting van de schermresoluties van mijn bezoekers.

Dit kan ervoor zorgen dat je niet te perfectionistisch hoeft te zijn.

Antwoord 10, autoriteit 2%

Ik gebruik Desktop altijd eerst, mobiel eerst heeft toch niet de hoogste prioriteit? IE< 8 toont mobiele css..

normal css here: 
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}

soms enkele aangepaste formaten. Ik hou niet van bootstrap enz.

Antwoord 11, autoriteit 2%

In plaats van pixels te gebruiken, moet u em of percentage gebruiken omdat dit adaptiever en vloeiender is, u kunt beter geen apparaten targeten op uw inhoud:

HTML5-rockrs gelezen, mobiel eerst

Antwoord 12, autoriteit 2%

Houd uw code netjes en stylesheets logisch gescheiden per scherm ‘media’ type config…

1) Het bovenstaande antwoord van Himansu als referentie gebruiken: Gemeenschappelijke CSS-mediaquery’s breken Punten
EN
2) https://www.w3schools.com/css/css3_mediaqueries.asp< br>

uw antwoord zou zijn:

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">
<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">

Antwoord 13

Je breekpunten zien er echt goed uit. Ik heb 768pxgeprobeerd op Samsung-tablets en het gaat verder dan dat, dus ik vind de 961pxerg fijn.
Je hebt ze niet per se allemaal nodig als je responsieve CSS-technieken gebruikt, zoals %width/max-widthvoor blokken en afbeeldingen (ook tekst).