- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design a responsive website?
A responsive website is a website that looks good and amazing on all devices i.e. desktops, tablets, and cell phones. A website should have a responsive design to make it responsive. It’s all about playing around with HTML and CSS for changing the size, hiding, or enlarging the screen.
Let’s see an example and what does responsive means while resizing a website,
Desktop
The website design on Desktop −
Tablet
The website design looks like this on a tablet. You can easily compare the changes with the above shown desktop screenshot −
Mobile
The website design looks like this on Mobile −
To develop a responsive website, which looks good irrespective of the device size, you need to work on the following concepts −
Viewport
A viewport is used to control layout on mobile browsers. It is used inside the <meta> tag to give the browser instructions on how to work for controlling the web page’s dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here,
The width=device-width sets the width of the page in order to follow the screen-width of the device. The initial-scale=1.0 is to set the initial zoom level. This helps when the page gets loaded by the web browser for the first time.
Media Queries
With Media queries, add a breakpoint where some parts of the design behave differently on each side of the breakpoint.
Image width and height property
For images to be responsive, you need to set the width property to 100% and height to auto.
- Related Questions & Answers
- How to design a modern Website?
- How to create a responsive website with Bootstrap 4?
- Is it necessary to have a responsive website?
- CSS3 Responsive Web Design
- Usage of Responsive Web Design
- How to disable zooming capabilities in responsive design with HTML5?
- HTML Viewport meta tag for Responsive Web Design
- Responsive web design best for mobile seo strategy
- Responsive Web Design with Media Queries in CSS
- Device Detection and Responsive Design in React JS
- How to create a responsive website that will work on all devices, PC, laptop, tablet, and phone?
- How to Add Google Maps to a Website?
- How to create a responsive image with CSS?
- How to create a responsive header with CSS?
- How to create a responsive form with CSS?