title: Distinct layouts vs one responsive layout to handle different device sizes and orientations
body: <p>I have specific layouts for any combination of desktop/tablet/smartphone and portrait/landscape. In the context of a <a href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow noreferrer">Single Page Application</a>, is it better to separate the layouts as different resources and load them using some javascript/css logic to detect device type and orientation or to have a single html/css resource and differentiate the layout using some complex media query/decoration logic?</p>
  
  <p>For the former option I see the cons of duplication, because it is likely that the layouts for the same section share a consistent amount of ui elements; for the latter I see it could be very complex to handle all different combination of device size/orientation inside the same html/css, especially if the layouts have significant differences between each other.</p>
  
  <p>What is the best approach and why?</p>