Retina adaptive images and css3 media queries

retina adaptive images and css3 media queries
see below QUESTIONs....
http://css-tricks.com/snippets/css/retina-display-media-query/
For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
QUESTIONS
If serve a resolution 2x bkgd image in resolution 1.5x mobile device display or in 1x display what should happen? In other words image resol is bigger than display resol... Image to appear in display resol or...?
Then in image edit software , also, for 2x resolution image creation.... how ppi must be in adobe FW or PS? 2x pixel ratio is retina... tell and for retina.
Another way(is it valid?) is serve an image width eg 600px with img css attr width:300px and and for high resol like tablets use media query to do img css attr width:600px (do normal)... in this way pixel ratio must be the same in both cases phone <> tablet???

I have tried it on two separate Windows 7 machines running Firefox 9.0.1. Disabling add-ons had no effect. The media queries work fine in all other browsers on the same machines. The styles in the media queries cause the site to display differently based on how wide the browser is, but in FF9, there is no change when the browser changes width.

Similar Messages

Upgraded to v10 and now media queries aren't working.

I upgraded to version 10 and the media queries are not working on a new site I'm working on . They worked fine on 9.01 and still are working fine on another machine that has 9.01. But not in 10.0.
It doesn't matter if its a <link> Media query or a @media screen. They are not working!
I tried to reinstall and I'm getting the same result.

I have test my site and queries in all the browsers and Firefox is the only one acting up. It worked in v 9. It's like they are being ignored. Here's an example of a media query.
I'm testing by resizing the browser window and also by loading a site through an iframe.
@media screen and (max-width: 800px) {
body { background: #ddd; }
Can someone please get this fixed. Mobile designs rely heavily on css media queries.

Aperture Referenced Images and IWeb Media browser

I'm new to Aperture, sorry if this is a stupid question, and have a Windows server full of photos which I am referencing into Aperture (rather than copying everything over)...
When I switch to IWeb and use the media browser, it seems that only files which are in the Aperture library , NOT Referenced files, show up. None of the referenced files show.
My expectation is that the Media Browser would also show the referenced photos, just as Aperture does, and then would copy the ones I choose into my IWeb project....It seems this is not the case.
Am I doing something wrong? Is this expected behavior?
Is there a better way to do this?
Thank you!!
Macbook Pro Mac OS X (10.4.9) Aperture 1.5.3
Windows XP Pro

Welcome.
Note the media browser only shows files that have previews. So you need to generate previews (which are JPEGs) for your master files. You have numerous options as to size and quality of the generated previews, but this is something you need to do for this to work.
The previews will be stored in the library itself. The masters for which the previews are generated can be either managed (i.e. in the library) or referenced (outside the library).

CSS, Media Queries and Iphone4

I downloaded the Adobe Certified iPhone 4 Emulator and what it is showing is not at all what is happening on the phone. I think part of it has to do with the pixel ratio, and using media queries?
Has anyone else had any problems? Or know how I can fix this?
Thanks.
-Jeana

I have the same problem with css3 (border-radius property). Rounded corners show up correct on my iPhone 4; the Adobe Certified iPhone 4 Emulator shows rectangles...
Has anyone a solution?
Regards,
Men

Where to download JAI and javax.media libraries

i want to download java advanced images and javax.media
help please

you didn't search quite hard!!!!! go on java.sun.com in the downloads section

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

Dreamweaver CC How to edit styles across media queries and sizes

I am creating a fulid grid/responsive website, using the standard Media queries offered by Dreamweaver CC when I start a new document.
I have creative several DIVs to sturcture my page.
I don't understand how to apply changes between the various media queries.
Frist, I see you can drag the width of the boxes to adust how wide you want the portions to be. That I get. But what I don't understand is to apply different formatting/styles in the different screen sizes. There used to be a box that would pop up when you wanted to create a new class. Now I can't figure out which version of the screen to work in and how to make changes ONLY to one screen size.
Here's an example of what I want to do:
The main portion of my website has 4 categories, that I would like the user to be able to choose from to click on.
On the mobile view, I want the image align left, text to the right of that, aligned left, and for the background of each category to be the same color so that it looks like one big button on mobile.
On tablet and desktop view, I want the image centered within the DIV, then the text centered under each image. I want the graphic image (which is in a circle) to stand out on a white background.
In the tablet view, I have it organized by 2 rows and 2 columns.
In the tablet view, I have it organized by 1 row and 4 columns.
I hope this make sense.
How do I signifyand create these changes? I have tried entering it in the code. That just seems to center it every image in every DIV (remember I want it aligned left in mobile) Or I tired entering it on the code in another way and that centered the image across the whole page, not just the DIV. HOw do I work around these problems? Do I need to make them all a class instead of a DIV? I am really confused....
Please be nice as I am obviously a bit of a beginner and struggling with this basic concept. I appreciate any guidance or help that anyone has to offer.

#1 Build mobile first. Everything else is based on that primary layout. Don't worry so much about content yet. Just get your mobile layout in order. Then build tablet and finally desktop.
#2 Do not tamper with code in your FluidGrid.css or Boilerplate.css files. These files are temperamental. Use a separate external style sheet for your content styles. That way if you do something wrong, it won't break the whole layout.
#3 Keep your layout structure simple and uncomplicated. No tables, no positioned elements.
#4 Everything needs to be inside the <gridContainer> div. If it's not, it won't be responsive.
Nancy O.

Responsive Design and @media queries

I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query. Is that correct?
So if I have this:
header {
    background: url("images/headerhand.png") no-repeat scroll left top transparent;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I need to put this in a @media query for the below break point:
header {
    background: none;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
Oh my, that was so complicated, I am not sure I even understand my own question!
Martin
PS "Mobile First" is starting to make a lot of sense!

osgood_ wrote:
pziecina wrote:
Hi Os
As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
Reply -
No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
pziecina wrote:
The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
Reply -
So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
BTW - I am over 60.
pziecina wrote:
As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
They are -
1 A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
Reply -
Use Shadow and your home wifi network, extra cost nothing.
PZ

Responsive Background Images with Media Queries

Hello,
I'm creating a mobile website in Dreamweaver and would like to use an image which will change with different device widths. I'm using media queries with background images. My problem is that in order for the background images to display, I need to assign a height to the div. When the image is scaled down the height stays static, leaving white space beneath it. There will be content below the image so the white space will push it down and look wrong. Is there a way to use multiple images with media queries keeping the height responsive? Thank you!
@media screen and (max-width: 1024px) {
#mainImage {
          background-image: url(../images/mainImageLarge.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 272px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 480px) {
#mainImage {
          background-image: url(../images/mainImageMed.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 107px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 320px) {
          #mainImage img {
          background-image: url(../images/mainImageSmall.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 150px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;

Like this example:
http://alt-web.com/FluidGrid/Fluid-4.html
METHOD:
Insert 2 images -- one for desktops and one for mobile. Assign classes to each image.
<img id="banner" class="desktop" src="desktop_image.jgp" />
<img id="banner" class="mobile" src="mobile_image.jpg"/>
In your CSS, use display:none and display:block to show/hide.
.desktop {
    display:block;
.mobile {
    display:none;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop {display:none}
    .mobile {display:block}
Feel free to set your break points however you wish.
Nancy O.

Embedding image and multiple queries in cfgrid

I have a datagrid that displays a user's work history pulled
from one query. In the original HTML table set up, a status icon
for each work item was displayed as either "New", 'Needs Attention"
or "Archived". This status was determined by using a value from the
first query as a filter in the WHERE clause of the second query:
------------------- Original Query -------------------------
<cfquery datasource="#application.defaultdsn#"
name="qQuestions">
SELECT discussions.dateSubmitted, discussions.discussionID,
discussions.subjectID, discussions.topic, users.firstName + ' ' +
users.lastName AS stName,
subjects.subjectID AS Expr1, subjects.subject
FROM discussions INNER JOIN
users ON discussions.userID = users.userid INNER JOIN
subjects ON discussions.subjectID = subjects.subjectID
WHERE 0=0
<cfif getDiscussionIDs.recordCount GT 0>
AND (
<cfloop query="getDiscussionIDs">
discussions.discussionID = #getDiscussionIDs.discussionID#
<cfif getDiscussionIDs.currentRow NEQ
getDiscussionIDs.recordCount>OR</cfif>
</cfloop>
<cfelse>
AND 0=1
</cfquery>
------------------------ Queries used to determine status
<cfquery datasource="#application.defaultdsn#"
name="LatestMessage">
SELECT Max(discussionPosts.postID) AS NewestMessage
FROM discussionPosts
WHERE discussionPosts.discussionID =
#qQuestions.discussionID#
</cfquery>
<cfset variables.userTypetoView = "tutor">

<cfquery datasource="#application.defaultdsn#"
name="getLastInfo">
SELECT discussionPosts.userType,
discussionPosts.dateSubmitted, discussionPosts.viewerID
FROM discussionPosts
WHERE discussionPosts.postID = #LatestMessage.NewestMessage#
</cfquery>
My question is how can I emulate this same status icon setup
in a cfgrid? I used the following ActionScript to create a new
column in the grid and return a string. However, this new column
must logically know how to display the correct status IMAGE for
each corresponding row. As you can see, there are no database
tables for storing the status - which would have made this much
easier.
function setStat(){
eQArchive.getColumnAt(1).labelFunction = statIcon;
function statIcon(item
bject, columnName:String): String{
if (item[columnName] != undefined) {
return asIcon;
else {
return "";
I also tried using the toScript() function in CF7 to see if I
can set a variable equal to the appropriate image and then return
it in the above script, but this is where I am at a loss.
<cfif getLastInfo.recordCount GT 0 AND
Trim(getLastInfo.userType) EQ "tutor">
<cfset stat = "/images/docArchive.jpg">
<script language="javascript" type="text/javascript">
<cfoutput>var #toScript(getLastInfo, "asIcon",
True)#;</cfoutput>
</script>
<cfelseif getLastInfo.viewerID EQ session.tutorID>
<cfset stat = "/images/docNew.jpg">
<script language="javascript" type="text/javascript">
<cfoutput>var #toScript(getLastInfo, "asIcon",
True)#;</cfoutput>
</script>
<cfelse>
<cfset stat = "Green">
<script language="javascript" type="text/javascript">
<cfoutput>var #toScript(getLastInfo, "asIcon",
True)#;</cfoutput>
</script>
</cfif>
Any ideas on how to get this working is greatly appreciated.
Thank you in advance.

Hi Mike,
To insert multiple queries in a single woorkbook.
In the Business Explore --> Analyser --> Open the first query and then click on tools button of the BEx add on components and select the option ( Insert Query ).
Reg's,
Pratap Reddy Bodimalla.

I am using media queries and div will not centre on desktop version

Hi,
I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
I have pasted my code below, am I missing something?
Any help would be great.
Thanks, Alex.
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
color: #FFF;
background-color: #000;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
text-align: left;
#LayoutDiv1 {
width: 1000px;
padding: 20px;
margin-right: auto;
margin-left: auto;

Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true. Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?

Media Queries and Orientation

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

Missing functions in DW CC - insert Spry and •Select Modify Media Queries.

In DW CC under the "insert" menu there should be "spry" not there
in Modify, there should be "media Queries" not there
Are these in a new place? can't fid this stuff

Pure CSS Drop-Menu
http://jsfiddle.net/NancyO/zN7fU/
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu 2
http://www.geektantra.com/2010/05/jquery-megamenu-2/
jQuery MeanMenu (responsive on mobile)
http://www.meanthemes.com/plugins/meanmenu/
Nancy O.

How to properly cite images and media used as to copyright

All of the images and media used in my iBook were either created by me or gotten from an Open Educational Resource repository such as Wikimedia Commons and are CC licensed such that I am permitted to use them. Wanting to avoid any delay in getting onto the iBookstore or have any questions raised about these assets after publication, I would like to cite these facts somewhere in my iBook. I'd rather not use captions for this since the citations will include long, ugly URLs. Traditional books have a page listing illustrations but I see no equivalent in the templates available by default.
So what is the best way to include information like this? Should I include a list of illustrations and media in a Reference section?

There are lots of different ways to cite the source of the image. I guess a big question is do you want to credit the source (or perhaps you are required by the license) right beside the image or is it okay to credit the picture at the back in a reference section.
Personally, I like to credit the source by the picture and put something like "Photo by John Smith / genericStockAgency" in the caption. Alternatively you can credit the source in a section at the back (e.g., see E.O Wilson's life on earth).
I'd suggest looking at various other ibooks and find a style that you like. BTW most books I have seen do not provide deep linking URLs for individual images and just list the source generically. E.g., image from wikimedia commons.

Media Queries: Works on Mac but not Windows

http://www.sandiegohomegrown.com/testSDTG/
I have been coding this site on my Mac and it works with Firefox, Safari, and Chrome. I fired up the old Windows machine and it doesn't work with Safari, Firefox, or IE10. It just ignores the media queries completely. This has to be something really simple but I am baffled. Help!! Gary

Alt attributes on images are not significant for rendering. Did you fix the duplicate ID problems? Those are important.
Windows OS doesn't ignore media queries but some browsers will if they see code errors they can't reconcile.
Make sure IE is NOT running in Compatibility Mode which is practically the same as IE7.
If you want to ensure IE always opens in standards mode, add this meta tag to the <head> of your HTML pages.

Nancy O.

Retina adaptive images and css3 media queries

Similar Messages

Maybe you are looking for