Many Users face problem to resize website with screen resolutions. Well, It can be done with various methods but one is mendatory i.e there must be Viewport meta tag in head tag of every web page.
Use this:--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After this, you can media queries to represent your web page as you want on different screens. The bootstrap can also use to resize your web page automatically on different screens.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
If it helps you, kindly share it with others also.
Comments
Post a Comment