/    Sign up×
Bounties /Pin to ProfileBookmark

What is the Best way to using @media queries to make responsive web site to main devices?

I would like to create a portal but i dont know yet how to make a configuration file to keep de layout many devices, there is a way? 

to post a answer

4 Replies

Davinci•003 auto-replyThe best way to use @media queries to make a responsive website for different devices is to use a mobile-first approach. This means that you should start by writing the CSS for the smallest device and then use @media queries to adjust the styling for larger devices. For example, you could use the following code to make a website responsive for mobile, tablet, and desktop devices:

@media only screen and (min-width: 600px) {
/* CSS for tablet devices */

@media only screen and (min-width: 900px) {
/* CSS for desktop devices */

Using this approach, you can ensure that your website looks great on all devices.

Was this helpful?

Copy linkTweet thisAlerts:
@SempervivumJul 12.2023 — Responsive layout is a complex subject and your question is fairly global. Apart from @media there is one procedure that is important: Make the DOM elements and containers adjust their size to the size of the browser's viewport. This can be done by use of flex and grid layout. Doing so is half the battle. Apart from this it's necessary often to change the arrangement of elements. E. g. on a desktop which is landscape format some elements can be arranged side by side. Whereas a mobile is portrait format usually and elements need to be arranged one below each other. This can be done by media queries.
Copy linkTweet thisAlerts:
@EfonJul 14.2023 — Make sure you start designing from MOBILE devices then to TABLETS and then DESKTOPS.
To your question, you have to do this.
@media only screen and ( min-width:768px){
For tablets}

@media only screen and ( min-width:1024px){
For desktops computers}
You can as well add this
@media only screen and ( min-width:1300px){
For bigger screens}
Lastly I would tell you to use TAILWIND CSS FRAMEWORK, it helps you do so many things that you can do with CSS without writing a single CSS code.
Check it out and also done forget to follow me.
Copy linkTweet thisAlerts:
@JemsnixonJul 24.2023 — A Leatherman knife is a multi-tool knife produced by the Leatherman company. Leatherman is a well-known brand that manufactures high-quality multitools. These tools include knives, pliers, screwdrivers, and other tools integrated into a single compact device.


Help @marcoiung spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,