PDA

View Full Version : media queries


dak1b
05-23-2012, 04:38 AM
Hi All!

I need some help with media queries. @media

So I need to format my website for a desktop, tablet, then mobile device.

My site only contains a image and a video.

How do I proceed to fit all the media formats? Need help with the coding...

Thanks in advance!!!:D

Corrosive
05-23-2012, 07:40 AM
Try this; http://www.dreamweaverclub.com/mobile-friendly.php

dak1b
05-23-2012, 05:02 PM
thanks for ur response...

I'm kind of getting it. Heres what I got so far. Using internal stylesheet for my media queries. How would I proceed to change the image and video on my site to fit desktop...tablet..mobile? need help in the coding...

<style>
/* Formattig code for mobile devices ipod, ipad, pc/mac*/
.mobile, .tablet, .desktop {display: none;}

@media (max-width: 450px)
{
p {}
.mobile {display: block;}
}


@media (min-width: 450px) and (max-width:799px)
{
p {}
.tablet {display: block;}

#logo {width:500px;}
}
</style>

dak1b
05-23-2012, 05:17 PM
Ok i'm kind of getting it. I'm using internal style sheet.I'm just trying to format my image and video for desktop...tablet...mobile. Heres my coding:

<style>
/* Formattig code for mobile devices ipod, ipad, pc/mac*/
.mobile, .tablet, .desktop {display: none;}

@media (max-width: 450px)
{
p <iframe width="420" height="315" src="http://www.youtube.com/embed/J3POpdFlxWE" frameborder="0" allowfullscreen></iframe>}
.mobile {display: block;}
}


@media (min-width: 450px) and (max-width:799px)
{
p <iframe width="640" height="480" src="http://www.youtube.com/embed/J3POpdFlxWE?autoplay=1&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

.tablet {display: block;}

}
</style>

dak1b
05-23-2012, 05:42 PM
Ok i'm kind of getting it. I'm using a video from youtube...I have 3 different sizes for the video and image for the desired format. desktop..tablet...mobile. should I set a class or id for the mobile devices?

gentleone
05-23-2012, 06:14 PM
If you want to get a video scaled and keep its aspect ratio, i'd recommend to use this jQuery plugin:
http://fitvidsjs.com/

gentleone
05-23-2012, 06:17 PM
Ok i'm kind of getting it. I'm using internal style sheet.I'm just trying to format my image and video for desktop...tablet...mobile. Heres my coding:

<style>
/* Formattig code for mobile devices ipod, ipad, pc/mac*/
.mobile, .tablet, .desktop {display: none;}

@media (max-width: 450px)
{
p <iframe width="420" height="315" src="http://www.youtube.com/embed/J3POpdFlxWE" frameborder="0" allowfullscreen></iframe>}
.mobile {display: block;}
}


@media (min-width: 450px) and (max-width:799px)
{
p <iframe width="640" height="480" src="http://www.youtube.com/embed/J3POpdFlxWE?autoplay=1&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

.tablet {display: block;}

}
</style>

You just keep the youtube iframe in the HTML, not in the CSS, and use the fitvids I mentioned.

dak1b
05-23-2012, 07:51 PM
If you want to get a video scaled and keep its aspect ratio, i'd recommend to use this jQuery plugin:
http://fitvidsjs.com/

great! is there something similar to this for images?

gentleone
05-23-2012, 08:10 PM
If you put this in your CSS then you have the same effect for images.

img {
max-width: 100%;
width: auto;
max-height: 100%
height: auto}

Responsive images comes with a downside, because you will to have make the dimensions of your image to fit the desktop, but mobile phones will get served with the same image only it gets scaled by the browser/device to fit and this sucks bandwidth if users are on a 3G network.

dak1b
05-23-2012, 09:45 PM
If you put this in your CSS then you have the same effect for images.

img {
max-width: 100%;
width: auto;
max-height: 100%
height: auto}

Responsive images comes with a downside, because you will to have make the dimensions of your image to fit the desktop, but mobile phones will get served with the same image only it gets scaled by the browser/device to fit and this sucks bandwidth if users are on a 3G network.

Ok. So I have a css for tablet and mobile if a certain size then it will default to that style sheet. how would the code look? where would I put the image location in the below code? does the below code also apply to video? i'm using a video from youtube iframe.



img {
max-width: 100%;
width: auto;
max-height: 100%
height: auto}

gentleone
05-23-2012, 11:26 PM
In my opinion you should (also) start with learning the basics of HTML & CSS. I mentioned this earlier to another member which also jumped on the media queries bandwagon without any solid background knowledge of HTML & CSS.

Developing for mobile. tablet and desktop with one single url is hard and it's bloody hard (even impossible) if you don't know at all where to put an image or an iframe.

The image (without width and height atributes) and the iframe goes into your HTML.
How to set-up fitvifds.js you can find out here:
https://github.com/davatron5000/FitVids.js

But I'd recommend to start here, because you miss essential knowledge about HTML & CSS to work with media queries:
http://htmldog.com/guides/

dak1b
05-24-2012, 01:33 AM
ok so I've downloaded and uploaded the jquery plugins for the fitvideo jquery. What do they mean by" Target your .container, .wrapper, .post, etc."

gentleone
05-24-2012, 01:47 AM
ok so I've downloaded and uploaded the jquery plugins for the fitvideo jquery. What do they mean by" Target your .container, .wrapper, .post, etc."
The element where the iframe is placed in. if you have a wrapper div with all your content, thus including the iframe, then you can target that wrapper div's ID or class.

dak1b
05-24-2012, 01:54 AM
The element where the iframe is placed in. if you have a wrapper div with all your content, thus including the iframe, then you can target that wrapper div's ID or class.

Ok great I got the video to work! :grin: thanks for the help guys!! I know i'm still learning...:)