https://github.com/haneenmahd/responsive-web
A Simple npm package for using responsive media screen sizes in your web app.
https://github.com/haneenmahd/responsive-web
angular design layout media polymer react responsive responsive-css responsive-design responsive-grid responsive-images responsive-menu responsive-theme responsive-web-design screen size vue webpack
Last synced: 7 months ago
JSON representation
A Simple npm package for using responsive media screen sizes in your web app.
- Host: GitHub
- URL: https://github.com/haneenmahd/responsive-web
- Owner: haneenmahd
- Created: 2021-02-08T11:53:51.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-15T07:52:47.000Z (almost 4 years ago)
- Last Synced: 2025-05-30T08:15:43.332Z (8 months ago)
- Topics: angular, design, layout, media, polymer, react, responsive, responsive-css, responsive-design, responsive-grid, responsive-images, responsive-menu, responsive-theme, responsive-web-design, screen, size, vue, webpack
- Language: TypeScript
- Homepage: https://haneenmahd.github.io/responsive-web/
- Size: 28.3 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @haneenmahd/responsive-web
A Simple npm package for using responsive media screen sizes in your web app.
## Now a Easier way to use media queries in your
- Easy to use
- Media screen sizes are completely made accurate for devices
- Make your website Responsive to all devices
# Installation
### Using npm
```
npm install @haneenmahd/responsive-web
```
### Using yarn
```
yarn add @haneenmahd/responsive-web
```
# How to Use
Example:
```jsx
import React from "react";
import styled from "styled-components";
import { Colors } from "apple-colors";
import QUERIES, { getWindowHeight, getWindowWidth, getWindowScrollPosX, getWindowScrollPosY, useScrollBy, useScrollTo } from "responsive-web";
const Wrapper = styled.div`
height: 300px;
width: 300px;
padding: 1.5rem 2rem;
border-radius: 1rem;
background: ${Colors.iOS.Light.Grey1};
@media screen and (${QUERIES.MOBILE}) {
background: ${Colors.iOS.Light.Grey1};
}
`;
const Header = styled.h1`
font-size: 25px;
color: #fff;
@media screen and (${QUERIES.MOBILE}) {
font-size: 18px;
}
`;
const Paragraph = styled.p`
font-size: 18px;
color: #fff;
@media screen and (${QUERIES.MOBILE}) {
font-size: 14px;
}
`;
const MyDeviceQuery = () => {
const windowWidth = getWindowWidth();
const windowHeight = getWindowHeight();
const windowScrollPos = getWindowScrollPos();
return (
Hello World
{windowWidth > 550 &&
Hello! Window width greater than 550px
}
{windowHeight > 500 && Hello! Window height greater than 500px
}
Scroll amount x: {getWindowScrollX()}
Scroll amount y: {getWindowScrollY()}
I am using queries to make my website responsive.
Scroll by
Scroll To
);
}
```
## Available Sizes
### Default:
- MOBILE
- TABLET
- LAPTOP
- DESKTOP
- TV
### You could Access these properties by: `QUERIES.OBJECTDEFINEDABOVE`
## Cusom Device Sizes
## IOS:
- FOUR (iPhone 4 Models)
- LANDSCAPE
- PORTRAIT
- FIVE (iPhone 5 to 7 Models)
- LANDSCAPE
- PORTRAIT
- EIGHT (iPhone 8 Models, excluding plus models)
- LANDSCAPE
- PORTRAIT
- PLUS (iPhone 7 and 8 PLUS)
- LANDSCAPE
- PORTRAIT
- X (iPhone X Models)
- LANDSCAPE
- PORTRAIT
## SAMSUNG:
- S3 (Also contains Note4 and Note5 Models Too.)
- LANDSCAPE
- PORTRAIT
- NOTE3
- LANDSCAPE
- PORTRAIT
- S6
- LANDSCAPE
- PORTRAIT
## TABLETS:
- IPAD
- MINI (This contains iPad 1, 2, Mini and Air too.)
- LANDSCAPE
- PORTRAIT
- IPAD4 (This contains iPad 3, 4 and iPad Pro 9.5" Models too.)
- PORTRAIT
- LANDSCAPE
- PRO10
- LANDSCAPE
- PORTRAIT
- PRO12
- PORTRAIT
- LANDSCAPE
## LAPTOPS
- NONRETINA (Devices which have non-retina display)
- RETINA (Devices Which have Retina display)
# Developer
## Haneen Mahdin
Follow me on:
- [Instagram](https://instagram.com/haneenmahdin)
- [GitHub](https://github.com/haneenmahd)
# License
### `responsive-web` is licensed under MIT.