Building Mobile Optimized Layouts With CSS + HTML

  1. There is no definitive way for CSS to detect whether your website is being accessed from a laptop/desktop or a mobile device. Instead, we have to really on screen size.
  2. Mobile browsers have a very large pixel density. As a result, fixed sizes (px, pt, etc.) will be appear much smaller on a mobile device with a screen width of 300 pixels than they will on a laptop browser window that is also 300 pixels wide.

CSS Media Queries

Relative Units

HTML Meta Elements

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store