Queries @media for sites 100% responsive?

Question

Queries @media for sites 100% responsive?

Navigation

#1 by (3 votes)

1

I currently work with three queries always based on the minimum width and maximum width of the screen. The Mobile defines from 250px to 480px, the Tablet I put as 481px to 1023px and the Desktop I put it from 1024px.

Currently on the devices I tested are working with only small bugs that do not disrupt usage but friends and developers have reported problems when the site's responsiveness. The site is as follows:

link

This is a test domain, and I leave a NOTE, I have only the Cortana page ready, then click on the cortana circle a to see the body of the site.

The great doubt is being in the statement of these queries, do I have to declare it based on the same time? What is the best way to declare them? And in html, can I use some goal to help with this?

EDIT

/* ----------------------------------------------------------------------------------------- */
/* Telas Pequenas */
@media (min-width: 249px) and (max-width: 480px) 
{

}

/* ----------------------------------------------------------------------------------------- */
/* Telas Médias */
@media (min-width: 481px)  and (max-width: 1024px) 
{

}

/* ----------------------------------------------------------------------------------------- */
/* Telas Grandes */
@media screen and (min-width: 1024px) 
{

}

/* Geral */

html css

asked by anonymous 05.11.2015 / 18:59

1 answer

@ Html.ActionLink and Url.Action are not taking the route of the controller annotation Leave the center bar using dragdealer.js

score 3 · Accepted Answer

First, you should pay attention to some points.

You are working with bootstrap. I do not know if you know it, but bootstrap is an extremely powerful tool, both in% as% and in% with%, having a lot of pre-ready css that would make your life a lot easier developing (especially if you are not an advanced user) as well as having an excellent javascript system for responsive sites.

I strongly recommend that you study the bootstrap more to make this type of website.

But if you want to do the rough development, here are some considerations.

You should set a primary goal for the development of your plugins , such as:

Should my site run primarily on phones and tablets?
Should my site run more on laptops and desktops?
Who is my user? Where is he accessing my site?

From here on you can define whether to develop it in grid (mobile-oriented as a priority) or whether it will develop by default, making adjustments as the screens are down - if necessary.

The big question here is the development flow, not the css you should use. If your development is focused on Mobile First , start your @media code for mobile phones and tablets, and only change the layout when you need to switch to a larger screen. For example, if you want a news list with 1 column in the phone and 3 columns in the computer, you should use Mobile First more or less like this:

.coluna {
   display:inline-block;
   width:100%;
   background:#fff;
   border-radius:3px;
   border:1px solid #eee;
}
@media(min-width:1024px) {
    .coluna {
        width:33%;
    }
}

So the column will look the same in all resolutions, except the width, which will change from 100% to 33% when it reaches a higher resolution than a tablet (in this example, 1024px). All other settings will repeat unless you overwrite css within css .

From the moment you set the code within a css and @media(min-width:1024px) it will be restricted to that range only, that is, the properties will not be passed on.