Hello coders 
I would like to hear from the experts.
what is the best way to design :
make a design based on desktop and use the media queries for the phone device,
or a design based on phone device and media queries for desktop screen.
Both approaches are used. I personally like to design the desktop version first as for my projects it has been the most important screen, but I don’t think it matters much.
1 Like
IMHO, the best way to design is to use a narrow-first approach. Narrow your browser as far as it will go and style the page so it looks good at this narrow width. Also, increase the text size to make sure large text doesn’t break the layout (although you will probably get a horizontal scroll bar at very big text sizes which probably can’t be avoided). Don’t use any media queries at this point. You are only designing for a narrow device. This will be your base/default CSS.
After you have finished the above then slowly widen your browser until you feel you have enough room to rearrange things on the page to take advantage of the wider view port. This is where you will set your first break point. Use min-width and em units to set it. Using em will cause it to take both view port width and text size into account which is good for accessibility. Add your changes for the wider view port to the break point. Repeat this gradual widening/adding break point process as needed. And don’t forget to test for increased text size along the way!
If you are smart about your initial styling on the narrow view port then I think you will find that you will need a lot less additional styling at the break points. Good luck and have fun.
3 Likes
Thank you for your feedback @bbsmooth , I think your way is very important and it will be a very good start for me. i was a bit confused.
thank you again 