I'm making a website, the design is responsive. But for the menu I'm choosing a simple toggle button, where the menu will reside when loaded on a mobile device. When the button will be hit, the menu will appear with a simple <ul><li> rendering bulleted list. But the thing is that, for the site, I did complex CSS for the menu; when I load the site in mobile device what should I do?
Do I need to reset all the CSS properties done into the menu CSS, and then to do the mobile device-specific CSS into the media query?
I think that's not a viable idea.
Then, what should I do? A colleague of mine suggested me to load different CSS for different media-width, but how?
I want to avoid #import in CSS, as it decreases site speed.
Yes, you can load different CSS for different viewport/media-width. Suppose, you made your site menu CSS into menu.css, and your mobile device's menu CSS into mobile.css then:
<link rel='stylesheet' href='css/menu.css' type='text/css' media='screen'/>
<link rel='stylesheet' href='css/mobile.css' type='text/css' media='screen and (max-width: 800px)'/>
The second stylesheet is specifically designed for mobile-device-friendly CSS, as you want, and the additional portion and (max-width: 800px) will load this stylesheet only on the specific viewport size.
So cheers!
Related
I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).
Is there a way to use media queries to load only the required stylesheet?
I have tried:
#import url(mobile.css) (max-width:599px);
#import url(tablet.css) (min-width:600px);
#import url(desktop.css) (min-width:1200px);
and
<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->
but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.
Is it possible to load only the wanted resource using media queries?
I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.
Edit
Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?
If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css
Try doing it within the HTML, for example:
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source
I can't see why this would not work with a (min-width: 1200px)` (for instance).
Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.
I have built a "responsive" website using by combining blocks from several different templates.
The problem now is that the css file is 5,000 lines and chrome suggests %84 of my css is unused.
Ive tried to remove unused css by using a couple different firefox plugins. The problem is the output css file looses its responsive properties. What is the best way for cleaning this up?
link to website
http://buyfuelpump.com/shop.php?u=fuelpumps
You could split your CSS Files into several (for different display sizes)
And then use (for example):
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="yourfile.css">
Alright so I'm attempting to build a responsive design, and one of the things that needs to be done is to ignore an entire style-sheet for an image slider (as the one I'm using has fixed dimensions when using a particular theme).
So, is there any way to just ignore every css rule that's in that particular file?
The most simple way would be to not load the css on that page programmatically.
Otherwise you could specify the device or viewport width (whatever you use for sizing) to only load your stylesheet when the screen size matches.
Something like:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="alternate.css" />
Can't you just display:none on the sliders container on each media query you dont want it featured?
I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
I have one webpage that I want to pull different stylesheets for print, mobile, screen, etc.
I have screen and print working perfectly. I have two different stylesheets for mobile - one for modern smartphones (iPhone/Android), one for Blackberries. They're called mobile.css and blackberry.css respectively.
How can I simply have my page load the mobile stylesheet when iPhone/Android accesses the page, and the blackberry stylesheet when most Blackberries load the page?
Using max-width: 480px will work, but it will also force the mobile stylesheet upon a Blackberry (whose screen is also 480px wide), which is undesired behavior.
Any help?
For Printing:
<link rel="stylesheet" href="print.css" media="print">
For targetting the Blackberry specifically, you may have to do some User-Agent sniffing.