the project I'm working on has 3 css pages - probably not the best but this is the syntax:
<link href="/cg/ui/css/desktop.css"" rel="stylesheet" type="text/css" media="only screen and (min-width:800px)" />
<!-- Tablets -->
<link href="/cg/ui/css/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 600px) and (max-width: 799px)" />
<!-- phones -->
<link href="/cg/ui/css/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 599px)" />
My question is, is there any way to do the same thing on a local stylesheet with those parameters? This does not work:
<style>
#media "all and (min-width: 600px) and (max-width: 799px)"{
/*this was my first guess, if possible but no works*/
}
</style>
Thank you, if possible it will make testing much easier!
#media all and (min-width: 600px) and (max-width: 799px)
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.
This won t work. how can i accomplish something similar?
#media screen and (max-width:480px) {
#import url("style480.css");
}
Try like this
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style480.css" />
I am trying to build a seperate CSS file for a site for mobile. The regular site was not originally built with mobile in mind, but the site now needs mobile functionality. Problem is, I am not able to get the mobile css file to load on any phone device. I have tried it on my Droid Razor in two seperate browsers, I have also tried emulating it using this: http://www.mobilephoneemulator.com/.
I can't get the mobile CSS file to load either way. I am not sure why. I set a few divs and all images to display:none; just to see if it is working, but I am not getting any results. Any help would be greatly appreciated.
Below is my links to the css files.
<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />
<link rel="stylesheet" type="text/css" href="/stylesheets/content-sanford.css" media="only screen and (min-device-width: 481px" />
<link rel="stylesheet" href="/stylesheets/mobile-sanford.css" media="only screen and (max-device-width: 480px)" />
This is the mobile CSS file code:
#charset "utf-8";
/* CSS Document */
#sliderFrame{
display:none;
}
#slider{
display:none;
}
img {
dipslay:none;
}
div#player{
display:none;
}
You forgot some ")" in two first link
<link rel="stylesheet" type="text/css" href="/stylesheets/css_Sanford.css" media="only screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="/stylesheets/content-sanford.css" media="only screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="/stylesheets/mobile-sanford.css" media="only screen and (max-device-width: 480px)" />
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