i.e. if you're on a tablet is there a class added to body called 'tablet' or something similar..?
Bootstrap - http://getbootstrap.com
No. You have to do that yourself.
However, Bootstrap uses Media Queries and some Helper Classes to style the content for different devices (depending on the screen size)
I guess you want these features:
http://getbootstrap.com/css/#responsive-utilities
If you are using the last version (3.1.1)
You'll be able to custom the interface depending on the current size of the screen using CSS classes.
Edit:
On older versions such as 2.3.2 it's here:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
The new version is more powerful with more choices but the old one is easier to understand. (visible-tablet, etc.)
Related
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 6 months ago.
Is it similar in using media query in CSS to using container utility in CSS bootstrap? I find the media query somewhat ridiculous in its implementation?
Media query: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Introduction: Bootstrap is based on normal css (which include the media queries you posted) combined with js and html. But you have some classes and components (html tags) already customized in order to help you. Now it depends on what you mean by similar. You can use pure html, css and vanilla js to accomplish everything bootstrap offers (since this is what bootstrap is based on). But a lot of bootstrap features have a lot of code behind, so it would be quite complicated for some of them.
The response: Since the containers from bootstrap are based on css + js + html (some of them containing media queries as well) your html container won't behave the same by default (you can accomplish similar results only with some extra code).
The mdn link you posted is showing the normal behavior of css media queries. You can use them to extend bootstrap features or to create a custom html element that fits your needs (depending on the case, it can be easier to create the component from scratch rather than modify one with a lots of unneeded features behind).
Getting back to the question: some of the customized bootstrap elements have some media queries integrated (or some other custom options, including js) that might not work with pure css or they would be pretty hard to achieve. This is why the answer is kind of generic (as the question)
Conclusion: even though bootstrap might seem way easier in some cases I strongly advise you to try to understand the basics of css (media queries included). On the long term, this would help you a lot when you need to customize a component or create a new customizable component yourself. Also an advice: if you ever need to customize a component try to avoid !important rulles in css. To accomplish this try to also understand css specificity.
Atm I'm using col-lg, col-md, col-sm and col-xs
happens that col-xs is set to width 768px, I guess.
How can I create a new col-xxs or something smaller for eg. width 480px ?
You can use the following to accomplish this. I personally link to the bootstrap CDN in my projects and keep a local version of bootstrap so I can tap into its mixins for my site specific styles which is where I would place the following...
#media (max-width: $screen-xs-min) {
#include make-grid(xxs);
}
Just had exactly the same need and wondered why I had never had it before. This is a pretty in-depth discussion about it;
https://github.com/twbs/bootstrap/issues/10203
And I found the most useful gist to be from Jakobud here;
https://github.com/twbs/bootstrap/issues/10203/#issuecomment-42162250
Gists;
SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709
LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0
I can't speak for the LESS version, I used the Sass version and it's been excellent.
Unfortunately #4dgaurav's answer is not enough to introduce new breakpoints when working with Bootstrap's LESS source. There's more code to just overriding variables.
If you are using LESS you could use these two additional breakpoints which work (tested!): https://github.com/brgrz/bootstrap-breakpoints
HTH
After a long time i got a new project, where i'm going to implement the RWD. Before getting project i was talking a lot the RWD, but when it comes to writing the code, i see lot of confusion. I really need your suggestions and ideas for proceeding further.
Here are my questions:
How to support support media queries stuff to the older versions of browser(ie6 ie7 ie8 etc) or what is the alternative way to do it.
Do i need to use the flexible layout within the fixed main layout (like percentage based widths)
What about using the Boilerplate or bootstrap etc which supports for fallback version also
What about using modernizer?
i recommend if you are stuck please look at conditionizr http://conditionizr.com/
for more information on media queries go here http://css-tricks.com/css-media-queries/
My current Website-Design is built with the Bootstrap responsive framework. It uses several custom fonts, which make up about 50% of the document size. The fonts are included via CSS, the way of inclusion can not be changed.
My goal now is to stop mobile devices from requesting these fonts, in order to reduce their bandwidth consumption.
Is there a CSS way, like #media (min-width: 480px), to not load the fonts in the responsive layout?
In most implementations, background images that are referenced in CSS media queries get pre-downloaded. (Unless you do some fiddling with your use of display:none;, but that won't be supported in all browsers.)
The same applies to any fonts you've included via media queries — even if they're specified for a larger/different viewport.*
Why?
This allows for a smoother transition if viewport size is changed, e.g. from portrait to landscape.
Solution?
Considering the constraints you mentioned, I don't see a clean way to do this only with CSS. You could do something with JS (but make sure it degrades gracefully), or PHP.
But the easiest ways to reduce HTTP requests and how much your visitors have to download include doing one or all of the following:
Using less fonts, or web-safe fonts instead.
Using a CDN for fonts.
Including 'minified' font files that only have the characters you'll
be using them for.
Check out Google Web Fonts for the latter two.
If you expect or get a lot of mobile traffic that's important for the site, it's always worth re-thinking a website's design and markup from a mobile-first approach: what's necessary and what isn't. (That approach can often help to even reduce clutter on the desktop version of your site.)
* The fiddling approach could be useful for fonts too, but you'd have to do browser testing yourself, as so far it's undocumented.
You could create two different stylesheets, one for mobile and one for desktop, then use PHP browser detection or various other methods to see if the user is on a mobile device or desktop device, and provide them with the corresponding stylesheet.
Take a look at the PHP get_browser function: http://php.net/manual/en/function.get-browser.php
All background images aren't necessarily pre-downloaded if referenced in your media queries -
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
perhaps this technique would also work for fonts too. Not if you're using anything that'd need JS (like typekit, google) your font's will be requested because of the JS anyways afaik.
I am building a mobile site and have looked into media queries but don't really like the lack of support. I'm really wondering what methods or approaches are commonly recommended.
On our site we are using head.js (http://headjs.com/) which adds classes into the tag about the client, notably: browser, width and supported features. What do people think about using this javascript method as a better supported way of handling different users and changing the design layout accordingly.
I do feel that perhaps this JS approach is used as our main method but that it might be worth using a number of others a fallbacks. Here is perhaps a chain of support.
1st: All universal styles plus layout for narrowest device window.
2nd: Use some method of CSS targetting to add a desktop style sheet if desktop viewing is assumed, possibly media=screen
After this we are handling the lowest and the highest denominator.
Finally: Use the styles (width etc) created by the javascript to fine tune the design for different layouts.
Thoughts?