Responsive with arbitrary number by user, not automatically in CSS

Question

Is it feasible to developers specify when the contents of the web page stack by responsive design? So for example if you are in 1200 x 1800 resolution, you are in the following display:

[A] [B]

However, if you are in 1000 x 1800 resolution, your display automatically in the following stack format by the virtue of Twitter Bootstrap's responsive functionality (I use Bootstrap 3):

[A]
[B]

However, is it feasible for developers specify when the responsiveness occurs - for example, when the resolution is less than 1100 x 1800, the above stack occurs - and if it's feasible, how can I specify it?

I use Bootstrap, HTML5, CSS3 as well as node.js, but I think node is irrelevant in this case.

I use Google Chrome, and don't care about how the other browsers react to the change.

Thanks.

When you say "resolution", you mean browser window size, right? — Dan Goodspeed, Nov 13 '13 at 11:31

score 0 · Answer 1 · answered Nov 13 '13 at 11:29

0

One approach may be to have a look at media queries (2), e.g. quoting from Mozilla

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

answered Nov 13 '13 at 11:29

SW4

69,876
20
132
137

Actually, I've used it and thought that it's exactly the one I should use, but it didn't change at all with and without the media query... Or maybe, the link element has to take in `media` attribute? I took the link element approach without `media` attribute, and in the linked file I wrote every style setting as well as media query on any devices... is it not a valid way to use media query? – Blaszard Nov 13 '13 at 11:41

score 0 · Answer 2 · answered Nov 13 '13 at 11:41

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

I hope help you

Responsive with arbitrary number by user, not automatically in CSS

2 Answers2