As a frontend developer how many screen i need to cover when it comes to responsive of a website
The entire point of responsiveness is that you don't think about the specific number of different screens you plan on supporting, but rather building an experience that works on all shapes and sizes of display, no matter what orientation or configuration it's in.
@nexxai sorry english is not my first language so i was not able to convey my message properly
I have created my page with tailwind css. Now i want them make them responsive but don't want to do alot of hardwork ( not want apply media query or break points for many screens) but want to apply 1 or 2 breaks points which covers all the screens.
Thanks for reply ❤️
You don't build for specific screen sizes. You build UIs that work on any reasonable screen size. An often cited minimum width is 320 pixels. If your app works on everything above that, you're good.
The usual approach is called mobile-first. You define your CSS rules for the narrowest screen widths, then add break points using media queries to override some of those rules on wider screens. I bolded the key terms you can google to learn more.
The easiest way to do responsive layouts is to use a front end framework like Tailwind or Bootstrap. Their CSS classes follow the mobile-first approach.
@JussiMannisto i actually want 2 break points values which works for all the screens Like [
@media(min = 360) // if i responsive on this screen it will good for all mobile scrrens
(Min= 1280) // if i responsive on this screen it will good for all desktop scrrens
]
Less work and more done
I am using tailwind css Did you get my point. English is not my first language
Thx for help
@abdulrehman176617 A breakpoint of @media(min-width: 360px) will only apply to screens that are at least 360px wide. Don't do that. Just define CSS rules assuming that the user is on mobile, then override them on wider screens. Then your UI will work on all screens, even below a width of 360px. This is the mobile-first approach I described earlier.
If you think a single breakpoint of 1280px is enough for you, then use that. That's already a predefined breakpoint in Tailwind and you can use it through the xl prefix. Just remember to test how every view behaves on narrower screens.
But using a single breakpoint is hardly "less work." Using breakpoints is easy. It can be hard to make the UX good on all screen sizes if you refuse to use other breakpoints. I don't know why you'd set such constraints to yourself.
if Iunderstood correctly You are asking how to make pages you have created resposnive?
If you used tailwind correctly they should be responsive already because one of Tailwind's core concepts is Responsive Design
If not you have probably omitted /not used tailwind classes for Resposnsive design?
Also It might help taking some tutorials and some learning from here, many lessons are free.
Since you say you are 'Frontend developer' and that you are using Tailwind, your professional development should include learning about responsive design, and as a minimum, reading the tailwind docs on this subject https://tailwindcss.com/docs/responsive-design
Please or to participate in this conversation.