A testing rhino news web application that demonstrate responsive web design.
The application is responsive to mobile , tablet and laptops:
key features for the design:
- It includes width=device-width to match the screen's width in device-independent pixels.
- It include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.
- Used CSS media queries to apply different styling for small and large screens.
- Used relative sizes for elements to avoid breaking layout.
- Designed for the smallest mobile device first; then progressively enhance the experience as more screen real estate becomes available.
TO SEE THE APP IN ACTION -
Step 1) Clone the repository. Step 2) Open index.html . Step 3) View it in all the viewports by resizing the browser window.