Meta tags:
description=In this shot, I will share my experience with responsive design using css @media Rules. Before you... Tagged with css, media, responsive, html.;
keywords=css, media, responsive, html, software, coding, development, engineering, inclusive, community;

Headings (most frequently used words):

first, css, media, rules, that, fits, all, possible, devices, dev, community, desktop, mobile, top, comments, more, from, youssef, zidan,

Text of the page (most frequently used words):
media (17), width (14), background (14), body (14), dev (12), the (12), first (10), and (8), mobile (8), share (7), min (7), max (7), desktop (6), with (5), other (5), css (5), like (5), #devices (5), #community (4), software (4), that (4), use (4), from (4), sizes (4), fullscreen (4), mode (4), labtop (4), any (4), rules (4), approach (4), designing (4), app (4), for (4), are (3), html (3), frontend (3), youssef (3), zidan (3), comment (3), you (3), copy (3), link (3), oct (3), ahmed (3), alaa (3), top (3), smaller (3), device (3), all (3), possible (3), before (3), create (2), account (2), log (2), code (2), conduct (2), education (2), your (2), what (2), web (2), nth (2), more (2), 2020 (2), joined (2), egypt (2), location (2), follow (2), report (2), abuse (2), menu (2), engineer (2), comments (2), order (2), bottom (2), larger (2), exit (2), enter (2), red (2), 3840px (2), ultra (2), blue (2), 2560px (2), full (2), green (2), 1440px (2), cyan (2), 1024px (2), purple (2), 768px (2), tablet (2), yellow (2), 425px (2), brown (2), developing (2), design (2), responsive (2), fits (2), search (2), place, where, coders, stay, date, grow, their, careers, made, love, 2016, 2026, ruby, rails, built, powers, inclusive, communities, open, source, forem, terms, privacy, policy, mlh, shop, free, postgres, database, contact, about, showcase, organization, accounts, advertise, help, tracks, videos, challenges, home, space, discuss, keep, development, manage, career, workers, javascript, webworkers, child, type, selectors, nthoftype, nthchild, jun, information, technology, institute, senior, front, end, developer, reply, button, very, helpful, thank, hide, dropdown, work, experienced, demonstrated, history, working, computer, industry, expand, collapse, dismiss, preview, submit, subscribe, bigger, chrome, toolbar, here, personally, fit, screen, mobiles, dekstop, start, adding, responsiveness, into, have, ask, yourself, going, this, shot, will, experience, using, edited, jan, 2022, posted, 2021, post, via, mastodon, facebook, linkedin, copied, clipboard, pick, gem, boost, save, jump, fire, raised, hands, exploding, head, unicorn, add, reaction, close, powered, algolia, navigation, skip, content,

Text of the page (random words):
css media rules that fits all possible devices dev community skip to content navigation menu search powered by algolia search log in create account dev community close add reaction like unicorn exploding head raised hands fire jump to comments save boost pick as gem more copy link copy link copied to clipboard share to x share to linkedin share to facebook share to mastodon share post via report abuse youssef zidan posted on oct 4 2021 edited on jan 31 2022 css media rules that fits all possible devices css media responsive html in this shot i will share my experience with responsive design using css media rules before you start adding responsiveness into your app you have to ask yourself am i going to design the app in mobile first approach or desktop first approach mobile first approach is designing or developing an app for mobile before designing for desktop web or any other device desktop first approach is designing or developing an app for dekstop before designing for mobiles or any other device here are the media rules that i personally use to fit all possible devices and screen sizes sizes from chrome device toolbar desktop first desktop first any other bigger devices body background brown ultra hd media max width 3840px body background red full hd media max width 2560px body background blue labtop l media max width 1440px body background green labtop media max width 1024px body background cyan tablet media max width 768px body background purple mobile media max width 425px body background yellow enter fullscreen mode exit fullscreen mode with desktop first we use max width and the order of the sizes from larger at the top to smaller at the bottom mobile first mobile first any other smaller devices body background brown mobile media min width 425px body background yellow tablet media min width 768px body background purple labtop media min width 1024px body background cyan labtop l media min width 1440px body background green full hd media min width 2560px body background blue ultra hd media min width 3840px body background red enter fullscreen mode exit fullscreen mode with mobile first we use min width and the order of the sizes from smaller at the top to larger at the bottom top comments 1 subscribe submit preview dismiss collapse expand ahmed alaa ahmed alaa ahmed alaa follow experienced frontend engineer with a demonstrated history of working in the computer software industry location egypt work frontend engineer joined oct 25 2020 oct 6 21 dropdown menu copy link hide very helpful thank you like comment like comment 1 like like comment button reply code of conduct report abuse youssef zidan follow senior front end developer location egypt education information technology institute joined jun 12 2020 more from youssef zidan what are nth child nth of type selectors css nthchild nthoftype html what are web workers webworkers frontend javascript html dev community a space to discuss and keep up software development and manage your software career home dev challenges dev videos dev education tracks dev help advertise on dev organization accounts dev showcase about contact free postgres database dev shop mlh code of conduct privacy policy terms of use built on forem the open source software that powers dev and other inclusive communities made with love and ruby on rails dev community 2016 2026 we re a place where coders share stay up to date and grow their careers log in create account