I've just download 320 and up for responsive design, the stylesheets are divided as follows:
480.css
600.css
768.css
992.css
1382.css
And print.css, style.css and 2x.css
I don't understand why isn't a 320.css stylesheet, or I should use style.css for that resolution?
Nope, you're right. Anything that's LESS THAN 480px will load the styles.css for these media queries, courtesy of the min-width settings on the media queries:
<!-- For all browsers -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css">
So with the device widths, the designs for 0 - 480px (including 320px) will go in style.css
480 to 600 = 480.css
600 to 768 = 600.css
768 to 992 = 768.css
992+ = 992.css
But if you want to have more fine-grain controls over the 320 resolution you can add another media query:
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/320.css">
and then create the 320.css stylesheet in the css directory. This sheet will be good for resolutions 320 - 480. Which means that now anything less than 320 will load style.css.
I think the idea of leaving that resolution out is that you'd create some a fluid or flexible layout that would work for both resolutions...
Related
I have two style sheets, one for mobile, one for computers.
I want to use my mobile sheet by default.
my header checks:
<link rel='stylesheet' media='all' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 580px)' href='css/large.css' />
but I still seem to be using my large stylesheet when I check on a mobile browser! (iphone 4)
try to do something like this:
(code of mine)
<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)">
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)">
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)">
(it's only and example)
My issue was that iphones seem to resize content.
I used :
<meta name="viewport" content="width=device-width, initial-scale=1">
...to prevent re-sizing in the phones browser.
Put this tag in the head, right before my media queries.
Now the media query functions properly.
I've got a really weird problem with the placement of my navigation after resizing the browser window. The best way to explain it is to show it I think.
After resizing to width < 600px and back to width > 600px:
https://www.dropbox.com/s/kjwbx85atcgcedu/Screen%20Shot%202014-02-16%20at%2018.57.50.png
Live version (404 page since about page has not been made yet):
http://lakitna.nl/responsive/?p=About
This issue is in Chrome. In safari the displacement is different, but also there. Other browsers have not been tested yet.
I am using media queries in my HTML header:
<link rel="stylesheet" href="css/global.css" type="text/css" media="only screen" />
<link rel="stylesheet" href="css/style600.css" type="text/css" media="only screen and (max-width: 600px)" />
<link rel="stylesheet" href="css/style1024.css" type="text/css" media="only screen and (min-width: 601px) and (max-width: 1024px)" />
<link rel="stylesheet" href="css/stylefull.css" type="text/css" media="screen and (min-width: 1025px)" />
Do you have any idea what the problem is and/or were it comes from? I simply do not know where to look.
I've added the following to my site to target phones/tabets etc:
<link href="assets/styles/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 640px)" >
<link href="assets/styles/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 641px) and (max-width: 768px)" >
<link href="assets/styles/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >
The stylesheets clearly work as they dynamically change within the browser, however the mobile devices I've tested are still targeting the main stylesheet, not the mobile versions.
Any suggestions?
Cheers
Apple Devices use min-device-width and max-device-width try to add
<meta name="viewport" content="width=device-width, initial-scale=1 />
to your header.
Hope this helps
I'm trying to create a responsive website. The design has 3 breaks, at 480px, 768px and 1024px. My link-section in the document head looks like this:
<link media="only screen and (max-device-width: 479)" href="320.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 480) and (max-device-width: 767)" href="480.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 768) and (max-device-width: 1023)" href="768.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 1024)" href="1024.css" type="text/css" rel="stylesheet" />
The problem with this is, that legacy devices that do not understand media queries don't load any of the style sheets.
Is there any way to include a stylesheet that is recognized only by devices that do not support media queries, like old Internet Explorers?
I would rather not include this stylesheet for all browsers and then reset or override it.
Thanks,
Jost
Just for tests and learning css3 i am trying to create small mobile website. But for now I have small problem with targeting stylesheets. I'm doing it in such way:
<link rel="stylesheet" media="only screen and (max-width: 180px)" href="xsmall.css" />
<link rel="stylesheet" media="only screen and (min-width: 240px)" href="small.css" />
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="medium.css" />
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="large.css" />
<link rel="stylesheet" media="only screen and (min-width: 540px)" href="wide.css" />
Unfortunatelly after changing xsmall.css change is visible also in other web versions ( so for 480px, 540 px etc ). I test websites (mobile one) on Opera Mobile Emulator. What I'm doing wrong?
thanks
What you are doing wrong is to think that your stylesheet selection includes only one of the style sheets.
A style sheet that you include with min-width will be included for any resolution that is larger, so if I for example have a 600px wide screen, I will get small.css, medium.css, large.css and wide.css, not only wide.css.
(Also, if I have a 200px wide screen, it would not include any style sheet at all...)
You would need to use both min-width and max-width to make it only include one of the style sheets.