https://github.com/simonepri/css-viewport-units-cross-browser
Cross-Browser CSS3 Viewport Units: (vh, vw, vmin, vmax)
https://github.com/simonepri/css-viewport-units-cross-browser
Last synced: over 1 year ago
JSON representation
Cross-Browser CSS3 Viewport Units: (vh, vw, vmin, vmax)
- Host: GitHub
- URL: https://github.com/simonepri/css-viewport-units-cross-browser
- Owner: simonepri
- License: gpl-3.0
- Created: 2015-07-19T09:20:56.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-22T07:42:53.000Z (almost 11 years ago)
- Last Synced: 2025-02-04T18:23:14.968Z (over 1 year ago)
- Language: CSS
- Size: 387 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## DESCRIPTION
This library is designed to allow the use of ``viewport unit`` also on browsers that do not interpret them.
Supports the use of all units ``(vh | vw | vmin | vmax)`` combined with all the properties of ``CSS3`` that supports them``(height | width | font-size | padding | etc. ..) ``.
To use it, simply add the following attribute to div interested:
``A-B="X"``
Where:
* ``A`` can be one of the four viewport unit. ``(Vh | vw | vmin | vmax)``
* ``B`` can be any property of ``CSS3`` supported. ``(Height | width | font-size | padding | etc ...)``
* ``X`` can be any numerical value that indicates the percentage of the unit above. ``(10 | 20 | 50 | 100 | etc ...)``
Example:
```html
This div fills the screen both in width and in height.
```
To do this, the library uses the ``native support`` of ``viewport unit`` when the browser allows it, and when not available uses ``Javascript`` to adapt the units to the screen size.
Due to time, the ``Javascript`` code of the library uses some ``API`` from ``jQuery`` library (Any version of ``jQuery`` is supported).
``When and if I have time, I will write a version of the library in pure Javascript.``
## CUSTOMIZATION
Since the properties that support ``viewport unit`` are relatively many, I created a program in ``C++11`` that allows you to select the properties and the units that serves to your project to create a lighter ``ad-hoc`` version of the library.
To do this simply open the file ``"viewport-generator.cpp" `` and remove/add the ``property`` and the ``viewport unit`` from ``property`` and ``viewtype`` and ``recompile`` the source.
Are then generated four files ``"viewport.css"``, ``"viewport.js"``,``"viewport.min.css"`` and ``"viewport.min.js"`` ready to be used in your project.
## INCLUSION LIBRARY
Add the following code inside the ```` tag:
```html
```
or:
```html
```
## EXAMPLE OF INCLUSION OF THE LIBRARY IN A PAGE
```html
Viewport Test
This red div fills the screen both in width and height.
```