Breakpoints written as 320, 768 and 1024 are named after three devices that were current when the stylesheet was written. The layout does not break at those widths; it breaks where the navigation wraps or the sidebar stops earning its column, and those numbers are different for every design.
/* device-shaped: obsolete the day a phone ships at a new width */
@media (min-width: 320px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
/* breakpoint-shaped: named for what changes, sized in em */
@media (min-width: 30em) { /* the nav fits on one line */ }
@media (min-width: 46.5em) { /* the sidebar earns its column */ }The way to find them is to narrow the browser until something looks wrong and write the query there, which usually produces four or five odd-looking numbers rather than three round ones. Sizing them in em is the part worth knowing: inside a media query em resolves against the browser’s initial font size, not against anything declared on html, so html { font-size: 62.5% } leaves the breakpoints where they were. A reader at 150% text size then gets the layout that fits the text, which a pixel breakpoint will never give them. The cost is that the number in the stylesheet no longer matches the number in the design file.