mobile-first.css is a tiny stylesheet to help you keep mobile in mind while building on desktop.
You just finished building something and it looks great on your computer. Then you pull it up on your phone and... not so great. It's easy to lose sight of mobile when you're building on a desktop screen. This stylesheet wants to help.
Paste this tag in the <head> element of the page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pooriar/mobile-first/mobile-first.min.css">
That's it!
- Gives the body element fixed dimensions with a 16:9 aspect ratio (like most phones).
- Forces the body element to only scroll vertically.
- All styles disappear at mobile viewport widths so it doesn't interfere with the real thing.
- Adds a phone-in-hand visual to really drive it home.
- Only applies the minimum necessary styles to the
<HTML>and<body>tags.
Hide the hand outline by adding a "no-hand" class to the tag.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent