I don't recommend using all of these 'just because'. Good info though. On Sun, Nov 23, 2014 at 8:27 PM Karl DeSaulniers <k...@designdrumm.com> wrote:
> 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/ > ______________________________________________________________________ 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/
