https://github.com/siddarthvader/css-media-all
css library with media queries for all devices
https://github.com/siddarthvader/css-media-all
Last synced: about 1 month ago
JSON representation
css library with media queries for all devices
- Host: GitHub
- URL: https://github.com/siddarthvader/css-media-all
- Owner: siddarthvader
- License: mit
- Created: 2017-01-05T07:07:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-07T13:38:51.000Z (about 8 years ago)
- Last Synced: 2025-02-28T18:35:24.901Z (2 months ago)
- Language: CSS
- Size: 8.79 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS MEDIA ALL
> A library written in css consisted of media queries to support the responsiveness of webpage.
CMA(Css Media All) makes your webpage responsive, idea behind this library is to make webpage more responsive to differrent screens,
the media queries used in this library is a LIFTOFF from [CSS tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/).
> ### Support
> it is written in vanila CSS and is mostly supported in all major browsers
> it is a small libarary for small websites where you dont have different code for desktop and mobile
## Use CMA in your site?
install using npm
```bash
npm install css-media-all --save
```
install using bower
```bash
bower install css-media-all --save
```
clone the git repo
```bash
git clone https://github.com/siddarthvader/CSS-MEDIA-ALL.git
```
Add to your CSS
```bash
import url('css-media-all.css');
p {
font-size:1rem;// this `rem` unit is now a variable and you can use it the way you want
padding:0.5rem;
}
```
Add to your html (this is standard setting, in case you forget)
```base
````
>## this is advised that refrain using `rem` in width property, use `%` for width;
## Idea behind it
for years we developers/designers are constantly arguing which is the best unit for css measurements, is it `px` or `em` or `rem` or `vw` or `mm`? nobody has a solid answer to it, because it varies according understanding of developer, but one thing remain unchanged which is rendering of page.
I personally find `rem` to be the best of all, it is relative to the `font-size` of `html` tag, i mean now you have an absolute base unit which is directly dependent on the `font-size` property of `html`, what more can you ask for?
with `rem`, you want to zoom-in your site?
* change the `font-size` of `html` tag?
you want to render your site on mobile viewport but you are not sure about the text size rendering?
* well change the `font-size` of `html` tag?
## Measurements
When it comes to `rem` you have to set the `font-size` of `html` tag, now in this module the default setting goes like this
````bash
| Desktop | Mobile(Portrait) | Mobile(Landscape) | Tab(Portrait) | Tab(Landscape) |
|---------|------------------|-------------------|---------------|----------------|
| .65vw | 1.5vw | .65vw | 1.5vw | 1vw |
````
where `vw` is the % of width of view port;
for example:
````bash
//device width is 1280px
html{
font-size:1vw; // meant 12.8px
}
p{
font-size:1.2rem;// (12.8*1.2)
}
````