The one rule: your stylesheet loads last

Everything else in this guide follows from it. Loading last means your rules win at equal specificity -- including the rules the engine wrote for narrow screens.

That is the trap, and it does not look like one, because on the machine where the skin is written the phone is not on screen.

A worked example, from a real skin. The engine floats a table of contents beside the article and, under 700px, stops floating it: the chapters go back to being a block above the text, because at that width there is no room beside anything. A skin gave the contents a percentage width to match its own measure. On the desktop it was too wide and overhung the article. The fix -- a fixed width and a mirrored gutter -- made the desktop right and the phone absurd: the article came out 155px wide on a 390px screen, because the skin's percentage was still winning below 700px, where the engine had already said width: auto and meant it.

Wrap an override in the range where it applies

@media (min-width: 861px) {
  .toc { width: 350px; }
}

Below that, say nothing. The engine has a reflow for small screens and it is the half of the stylesheet you have least reason to replace: it is where the layout stops being decoration and starts being whether the text fits. The cost of this rule is that a skin ends up with more media queries than it feels like it should need. Pay it.