Help me please.
It does not work in IE!
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="styles/global.css">
file global.css
body{ background-color:black}
#media screen and (max-width: 650px) {
body{background-color:red;}
}
#media screen and (max-width: 450px) {
body{background-color:green;}
}
But It works:
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<style>
body{ background-color:black}
#media screen and (max-width: 650px) {
body{background-color:red;}
}
#media screen and (max-width: 450px) {
body{background-color:green;}
}
</style>
may have other solutions?
According to the homepage of the css3 mediaqueries support script you are using, it only supports inline scripts, and not external and imported scripts.
Related
So I have a website, with the responsive css (Mobile oriented). CSS stylesheet has rules for the mobile version, then (in the end of the file) #media queries start for the screens wider, then mobile.
When a page is loaded on desktop (and if this page is not cached by the browser), mobile css loades first, then in less then a second, it switches to the desktop styles. So it blinks with mobile version css (considering the fact, that desktop is wider then mobile screen, it stretches huge elements through out the page), then looks fine.
I understand, that the browser needs to load the stylesheet completely, and before it did so, it shows what it has already loaded. I understand, that this behavior is explainable, but it still bugs me.
Is there a way to load the css without blinking with mobile version (but WITHOUT making it desktop oriented (so that the desktop css loaded first, and the rest was handled by the #media queries)) and should I even bother about it (or is it just fine and should remain that way)?
Here is some code:
Meta tags before CSS:
<meta charset="UTF-8"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="apple-touch-icon" href="images/icn.png" />
<link rel="shortcut icon" href="images/icn.png" type="image/x-icon" />
Invoking CSS from an HTML file:
<link rel="stylesheet" href="styles/page1.css">
CSS File example (shortened (this is just an example of the structure of CSS in the file)):
html {
margin:0;
height:100%;
padding:0;
}
body {
height:100%;
margin:0;
padding:0;
font-size:16px;
}
.first-panel {
background: black;
width:250px;
height:100vh;
color:white;
position:fixed;
left:0;
clear:both;
top:0
}
.no-user-select {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
#media only screen and (min-width:480px) {
}
#media only screen and (min-width:640px) {
}
#media only screen and (min-width:768px) {
}
#media only screen and (min-width:1024px) {
.first-panel {
background: white;
color:black;
}
}
#media only screen and (min-width:1280px) {
}
Adding "max-width" to your media-selector should do the trick:
#media only screen and (min-width:480px) and (max-width: 639px) {
}
#media only screen and (min-width:640px) and (max-width: 767px) {
}
#media only screen and (min-width:768px) and (max-width: 1024px) {
}
#media only screen and (min-width:1024px) and (max-width: 1279px) {
.first-panel {
background: white;
color:black;
}
}
#media only screen and (min-width:1280px) {
}
There are few approach you can use
1st Approach by using CSS File
<link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">
2nd by using Javascript
if (window.matchMedia('screen and (min-width: 600px)')){
document.write('<link rel="stylesheet"
href="small.css">');
}
I suggest for better one you need use only one css file and define the concept like as below :
#media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
#media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
#media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
#media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Due to my vague understanding of tools I am using I failed to identify the source of the problem. node-sass does not provide media-queries aggregation, but css-mqpacker does, that is where I had to look for the problem resolvation. https://github.com/hail2u/node-css-mqpacker/issues/49.
What would be your way out of the following situation.
I merge two partial .scss files by #importing them to base file. Each file has media queries, and they provide styles for respective element of a page.
/* contents of index.scss */
#import "_block.scss", "_block-2.scss";
First file introduces two breakpoints, and order of appearance for these breakpoints in sass compiled stylesheet is defined by order in this file.
/* contents of _block.scss */
.block {
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
The #import of the second file has the same set of breakpoints plus one for max-width: 550px.
/* contents of _block-2.scss */
.block-2 {
#media (max-width: 550px) {...}
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
Identical breakpoints are aggregated during compilation, but a new one is placed at the end of compiled stylesheet, overriding properties for all breakpoints for particular element, which is not desirable behavior.
/* stylesheet compiled by sass */
#media screen and (max-width: 500px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 450px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 550px) {
.block-2 {...}
}
What would be a right solution?
This example represents a project where I cannot import second file before the first one because it introduces another problems with overriding.
I ended up defining style specifically to order all existing breakpoints, and introducing it early, but it is a hack I do not like at all, so I still in need for elegant solution.
It concerns me whether there is a use for media queries nested in CSS rules if it leads to such implications. In desktop first and mobile first media queries order matters, but I do not have sufficient control of it even in this simple case.
.block {
background-color: lightblue;
}
#media screen and (max-width: 500px) {
.block {
background-color: lightgreen;
}
}
#media screen and (max-width: 450px) {
.block {
background-color: lavender;
}
}
Also see https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I added your current setup & and a suggested solution.
This is assumed you really need to run the 2 css files in the order you explained. It is also assumed that you want to keep as-is but have the final result working.
Since you might (for some reason) not want to delete the original values in CSS, you will have to set the ones you do not want to use, to transparent. That is background-color original default.
As a second step you need to decide which max-width you really want. When you know that you can secure the system uses that by adding "!important".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Current setup */
#media (max-width: 500px) {body {background-color: red}}
#media (max-width: 450px) {body {background-color: blue}}
#media (max-width: 550px) {body {background-color: green}}
/* Solution */
#media (max-width: 500px) {body {background-color: transparent}}
#media (max-width: 450px) {body {background-color: yellow !important;}}
#media (max-width: 550px) {body {background-color: transparent}}
</style>
</head>
<body>
test
</body>
</html>
I am having an issue that I can't find an answer. I am using the #media code below and it works when I use inline CSS, but when I remove the inline code and add it to a CSS file it stops working.
Here is what I am using to test it.
#media all screen and (max-width: 480px) {body{font-size: 8px; }}
#media all screen and (min-width: 481px) and (max-width: 768px) {body{font-size: 28px; }}
#media all screen and (min-width: 769px) {body{font-size: 38px; }}
Any ideas why it stops working when it is added to an external CSS file??
Most likely you need to add the following in the <head></head> section of your html file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
replacing mystyle.css with the name of your external css file.
...and in your css file something like:
body {
#media all screen and (max-width: 480px) {
font-size: 8px;
}
}
CSS
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
what is the use of media="screen and (max-width: 480px) in this css attribute. Is this related with #media only screen (max-width: 480px) in css body. Please explain about this. I can't really understand.
If yes,
CSS
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width:8.33%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width:8.33%;}
}
I have three formate for mobile, desktop and tablet in my CSS body. In this type how will I put it. Do I need to put multiple media tag in my css attribute.
Yes, its related.
You can use media queries in few ways.
You can declare some stylles in CSS body as You writed:
#media only screen (max-width: 480px)
Or You can specife in html which .css file will be used in which situation:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
So You can use media queries in multiple ways.
I suggesty You, when You have several lines of css code to put in media - use this inline form in css body. When You want to put some big amount of code -it's better to refactor this to different files. The code will be more clean and decent.
I have had problems with the responsive design, so I made a stylesheet for mobile named mobile.css and linked it in the header, but no change.
<link rel='stylesheet' id='mobile' href='mobile.css' type='text/css' media='handheld' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Then in mobile.css
I havent copypasted all the code, because its a lot, but I know the code is right because it worked on my android phone, but not chrome and safari mobile.
#media handheld and (min-device-width : 768px)
and (max-device-width : 1024px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code }
#media handheld and (max-device-width : 480px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code code }
#media handheld and (max-width: 380px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code }
#media handheld and (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code }
try use following media query specifically for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS rules */
}