On Nov 23, 2014, at 10:29 AM, Crest Christopher <crestchristop...@gmail.com> wrote:
> Tom & Tim - I forgot about the mobile tools in Chrome, they are pretty good, > I wonder if you can add devices, my phone is not listed. > > Christopher Hi Christopher With firefox, you can set different screen sizes in their responsive layout mode. VERY helpful. One thing I have found to be a good method with images is to make them width: 100% and then wrap them in a div and set the images size with the div. Also, set the images div's size in percentages based on that div's parent and you will then have a fluid/liquid image in a container that you can have size up or down respectfully. If when resizing the viewport your image gets too big or too small, then set a MQ with a min-width or max-width; IMO... NEVER set a max-width on an <img> itself. 2¢ Here is somthing I got when I went looking on Google for this same info. CSS-Tricks: /*CSS @media skeleton by Tirumal - April 28, 2013 - http://code-tricks.com/css-media-queries-for-common-devices/*/ @charset "UTF-8"; /*Most Popular Screen Resolutions Desktops & Laptops 1024×768 and higher iPhone 5: 1136×640 4S: 640×960 3GS: 320×480 iPad First & second generations: 1024×768 Third generation: 2048×1536 iPad Mini 1024×768 Android Phones & Tablets Most phones are 320px wide or 360px wide, and most tablets are 800px wide. When designing for them, however, it is typical for developers to break them into the following groups based on their Density-independent pixel (dp), which is the minimum screen size. Small screens: 426dp x 320dp Normal screens: 470dp x 320dp Large screens: 640dp x 480dp Extra-large screens: 960dp x 720dp*/ /* All Smartphones in portrait and landscape ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* YOUR STYLE GOES HERE */ } /* All Smartphones in landscape ----------- */ @media only screen and (min-width : 321px) { /* YOUR STYLE GOES HERE */ } /* All Smartphones in portrait ----------- */ @media only screen and (max-width : 479px) { /* YOUR STYLE GOES HERE */ } /***** ANDROID DEVICES *****/ /* Android 240 X 320 ----------- */ @media only screen and (max-width: 241px){ /* YOUR STYLE GOES HERE */ } /* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */ @media only screen and (min-width: 375px) and (max-width: 385px){ /* YOUR STYLE GOES HERE */ } /* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */ @media only screen and (min-width: 680px) and (max-width: 690px){ /* YOUR STYLE GOES HERE */ } /* Kindle Portrait 600 X 1024 ----------- */ @media only screen and (min-width: 595px) and (max-width: 610px){ /* YOUR STYLE GOES HERE */ } /* Kindle Landscape 1024 X 600 ----------- */ @media only screen and (min-width: 1000px) and (max-width: 1030px){ /* YOUR STYLE GOES HERE */ } /***** ALL GENERATION IPADS *****/ /* iPads in portrait and landscape----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* YOUR STYLE GOES HERE */ } /* iPad in landscape----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* YOUR STYLE GOES HERE */ } /* iPad in portrait----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ /* YOUR STYLE GOES HERE */ } /***** Retina IPAD 3 & 4*****/ /* Retina iPad 3 & 4 in portrait and landscape----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2){ /* YOUR STYLE GOES HERE */ } /* Retina iPad 3 & 4 in landscape----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){ /* YOUR STYLE GOES HERE */ } /* Retina iPad 3 & 4 in landscape----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2){ /* YOUR STYLE GOES HERE */ } /***** IPAD 1 & 2 (ALSO IPAD MINI)*****/ /* iPad 1 & 2 in portrait and landscape ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* YOUR STYLE GOES HERE */ } /* iPad 1 & 2 in landscape ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* YOUR STYLE GOES HERE */ } /* iPad 1 & 2 in portrait ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1){ /* YOUR STYLE GOES HERE */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* YOUR STYLE GOES HERE */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* YOUR STYLE GOES HERE */ } /* Only iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* YOUR STYLE GOES HERE */ } Best, Karl DeSaulniers Design Drumm http://designdrumm.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
