Queries @media for sites 100% responsive?

Asked

Viewed 414 times

1

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

Currently on the devices I tested are working with only small bugs that do not disturb the use but friends and developers have reported problems when the responsibility of the site. The website is as follows:

http://webt.pe.hu/bluc/index.html

this is a test domain, and I leave a NOTE, I have only the Cortana page ready, so click on the Port to see the body of the site.

The big question is being in the statement of these queries, I have to declare it based also at the time? What is the best way to declare them? And in html, I can use some meta to help with that?

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

  • Please state what problem you are having: desired behavior and current behavior, and if possible the relevant code snippets. Otherwise, we would have to go around looking for problems, not knowing what to look for (unless the problem was obvious, of course). P.S. Link is correct? Here is giving 404.

  • I fixed the link.. I really did not describe error because I do not know what is the error, I tested on two totally different desktop, a wide screen and another square monitor and in both worked perfectly, the same happened with a tablet, and 3 smartphones of different resolutions. But some friends and developers I asked to access had viewing problems.

  • Soon I imagine that the problem is in the media queries that I am using, I gave details of it in the topic and to see them in action is to just enter the link, give a Ctrl+U and open any style file, with the exception of bootstrap, Hover and font, which are frameworks.

  • I just wanted to know what is the most suitable queries for a responsive site and if there is any meta that helps in this, I left the link to the site just to see if they find bugs and also have full access to the code.

  • 1

    It is not feasible to look your entire website for errors. Look this photo how it looks on my monitor. In the file I saw, index.css, You don’t treat resolutions above 1024. And this is exactly what my monitor fits. If you want a more complete answer, I’ll have time to help you better tonight

  • 1

    @Leonardovilarinho Did your friends tell you what Operating System and browser they are using? I didn’t notice anything unusual or that could be improved on the few css I saw (I only opened a few, I didn’t look at all), but I noticed that the layout of the elements varies with the height of the window (Win7, Chrome: http://i.stack.Imgur.com/b9MPJ.jpg). Is it your goal that the screen doesn’t roll? If it is, your question about "declare based also on height" probably would have as answer "yes" (except that I have no experience with this type of screen to opine).

  • I found the mistake really, is that I set this page I did but do not set queries for height, I will see what I do, create another without being fixed or not.. By clicking the Cortana ball the site works ne normal?

Show 2 more comments

1 answer

3


First, you should watch some points.

You are working with bootstrap. I don’t know if you know it, but bootstrap is an extremely powerful tool, both in css as in javascript, possessing several plugins pre-made that would make your life much easier by developing (especially if you are not an advanced user), in addition to having a system of grid excellent focused on responsive websites.

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

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

You must set a main goal for the development of your css, as:

  • My site should run mainly on mobile phones and tablets?
  • My website should run more on laptops and desktops?
  • Who is my user? Where is he accessing my site?

From there you can define whether it will develop in Mobile First (facing mobile as a priority) or if it will develop in a standard way, making adjustments as the screens decrease - if necessary.

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

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

This way, the column will look the same in all resolutions, with the exception of the width, which will change from 100% to 33% when it reaches a resolution greater than a tablet (in this example, 1024px). The other definitions will repeat, unless you override the css within the @media(min-width:1024px).

From the moment you define the code within a min-width and max-width it will be restricted to that interval only, that is, the properties will not be passed on.

  • 2

    Excellent point about bootstrap, in fact include the bootstrap on a page and not use the grid system is a huge waste of the potential of this platform. With grids we work more with ready-made classes than [directly] with media queries. I suggest to the AP to read a little on the subject, here for example has an introduction to the grid system.

  • Well, I didn’t know about the grid I’ll give a study anyway, about the medias for me is right, the width control is correct I just can’t do the height control.

  • 1

    I would say that in most cases it is useless for you to do the height control, since it does not have such a big impact on the layout display. In this case it is worth keeping the focus on the orientation, whether it is Portrait or Landscape, because in some cases you can change @media even if it is the same device.

  • I really also think this kk, but I made a fool of trying to make a fixed page as index if you repair this page http://webt.pe.hu/bluc/pg/cortana.html it costs to present problems, only in resolutions that hardly exist.. now the home page I did fixed presents problems at the time because of the slide

  • 1

    Yes. But read the friend link @mgibsonbr and also look for more materials on the bootstrap. I started using it and today I have a file that I use in ALL my projects, where I only took the grid, made some small adaptations to my workflow and use everything I do. Is excellent!

  • I took a look at the link, I liked what I saw, will take a joke with this, but I think better to do the styling with the queries same, to have more control than will be presented and have more customization, my mistake on this site was trying to make the index with fixed positions for everything.. But I will investigate this method

  • 1

    Yes, if your site is Responsive, there is no escaping the use of @media, unless you create a file. css for each size, example 498.css 768.css, 1024.css and load the file dynamically with js (example). But it would be awful, as you would have to declare ALL css properties in each file. And if you change into one, you should change them all. Lay out the mobile-facing css layout and modify only the necessary ones increasing( 468px -> 768px -> 1024px).

Show 2 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.