Luca's Blog

Latest Post

23 Feb 2018

Responsive Design snippets

Viewport <head> [...] <meta name="viewport" content="width=device-width, initial-scale=1.0"> [...] </head> Use small or relative sizes <style type="text/css"> .logo{ width: 100px; } .box{ width: 100%; } .hero{ max-width: 100%; } </style> Tap/touch targets fixed 48px area <style type="text/css"> nav, a, button { min-width: 48px; min-height: 48px; } </style> variable area <style type="text/css"> nav, a, button { padding: 1.5em; } </style> CSS Media Query Usage CSS Media Query with linked file <link rel="stylesheet" href="style. ...Read More

All Posts