I am just asking, since didn't find anything relevant here.
Is using media queries together with display: none a legit thing for creating a mobile version of the web-site? I mean, is this an acceptable practice or is there another way to do so?
I just used it on a project, looks alright, but maybe there are some snags here?
Thank you in advance.
You could only work with media queries instead of having one default css. In that case you wouldn't need to set something that you don't use in other resolutions.
e.g.
put here everything which you don't wanna show in the lower resolutions:
#media only all and (min-width: 1024)
Related
I compile my gwt project with gwt-style=OBF and realize that this generates media queries where the space between "and" and "(" is missing.
So out of
#media screen and ( ... gets
#media screen and(
According to W3C this not ok and also does not work (at least in Chrome and Firefox). Do you have any idea how to generate working CSS and still use gwt-style=OBF?
"GWT-CSS" (or "GWT-aware CSS") is limited to CSS 2. If you want CSS 3 you have to use "GSS".
this post was a mistake by myself. I assumed that obfuscation would cause the problem above. As I learned now it has nothing to do with obfuscation but with minifying the css. We used yui-compressor which has a known bug when it comes to #media and ... So we just need to switch the tool for minifying the css.
Sorry for the mistake
I thought it would be a neat idea to put my default css which has no width/height/.. dependencies in a media query like this:
#media only all and (min-width: 0px){ ... }
Are there any possible drawbacks I've missed?
It's not as readable to be honest with you. If I were to see that in a CSS file, I would assume it's some weird CSS hack.
The other downside is you're adding an unnecessary media query. Setting all your default attributes through a media query is making more work for the CSS compiler.
Finally is support. Not all browsers support media queries, especially if you work in enterprise or with clients who have very old browsers. If you have all your defaults set through media queries you don't have an easy fallback if those queries fail.
It's not a good idea to use anything that isn't really adding to your webpages.
The unnecessary use of media queries can also cause problems with old browsers (eg. IE 7,8,9) if there is no polyfilling. It will also add to the page load time.
There are other numerous ways to increase readablity:
1.opening and closing comment lines to a set of CSS blocks
/******default code******/
html{
.....
}
body{
.....
}
/****--default code--****/
separate CSS files
code collapsing in IDE
other tips are mentioned here at Improving Code Readability With CSS Styleguides
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
I know this type of question has been asked a 1000 times, and 99% of the time someone hurries in and gives media queries as the solution. It no longer is the optimum answer.
The Situation: I have video in the background on a webpage - that does not render on a mobile device, so I want to use an agent to detect mobile and simply swap the css page to a mobile friendly version.
Please do not post a media query as the solution because my cell phone is 800x1200 and my tablet is 1900x1200, more than my desktop:1600x900 so a media query wont work.
Hoping someone can post an entire solution with the agent and insert where the css reference goes becuase I dont want to mess that up..
Im presently using an agent that redirects to a separate mobile page but that means maintaining 2 pages vs. one with stripping css instead. (1 page and 2 css files)
I think many here will find this answer helpful as many with this question have no answer.
thank you..
PS - please be detailed Im a noob.
thanks
If your using http://code.google.com/p/php-mobile-detect/ something along the lines of the code below should work.
<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile())
{
?>
<link rel="stylesheet" type="text/css" href="mobile.css">
<?php
}
else
{
?>
<link rel="stylesheet" type="text/css" href="noneMobile.css">
<?php
}
?>
Very simple example but would work in your case. You could go into more detail with $ddetect->isTablet() etc, full list here http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
In direct defiance of the question, I'm going to say that as of 10/12/21, Media Queries are absolutely an option once again, as in most situations they will work.
If you're looking to target the page width, you'll use the following. This is a quick fix, and most likely is the main reason for OP's question, as it doesn't address the fact that some devices have resolutions shared by desktops, yielding a mobile experience on desktop, or vice-versa.
#media (max-width:400px)
To circumvent this, you want to use the following to check for the device width instead:
#media (max-device-width: 400px)
This deals with the DISPLAY size, versus the webpage size. It's not perfect, but combining this with device heights, and vendor-specific queries, you can fix most situations with CSS. The bonus is that you can keep the web page optimized without needing extra JavaScript or PHP, or any other additional web technology, and for the fringe cases, you can use the options provided here.
IS media-query will work in IE8 Iframe?
I want to load responsive website in iframe (width:600).media-query is taking all browsers but in IE its not taking. how to fix it?
Is there any solution apart form media-query
i've tried "css3-mediaqueries-js"
Thanks
Shanid kv
No, mediaqueries don't work in IE8 : http://caniuse.com/#feat=css-mediaqueries
Rather than trying to find a workaround for this old browser, I would suggest to find a gracefull fallback, or better, not support it.
This is another polyfill for mediaqueries - https://github.com/scottjehl/Respond
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
and reference the js file in the link on your page
#all,
I got the solution instead of writing media query we can do with "max-width" and "percentage width". in this case it will work in IE8 also.
here is the example
http://scottjehl.github.io/Respond/test/test.html
Thanks
shanid kv