Re: [css-d] Don't miss a space
23 nov 2014 kl. 03:14 skrev Crest Christopher crestchristop...@gmail.com:
Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container the
size of the image
If you must use images, there’s stuff like the classic ”Sliding doors”
technique. I usually blend images with CSS3 so the middle ground is all CSS and
the images only enhance the main design.
__
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/
Re: [css-d] Don't miss a space
Tim Arnold wrote: This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Hmmm. I followed the link, and it appeared in my browser window which occupied the right half of my screen (your message appears on the left); all is visibly not very well ... https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0 Philip Taylor __ 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/
Re: [css-d] Don't miss a space
On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Tim Arnold wrote: This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Hmmm. I followed the link, and it appeared in my browser window which occupied the right half of my screen (your message appears on the left); all is visibly not very well ... https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0 Philip Taylor No issue seen this end Windows SeaMonkey/2.30. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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/
Re: [css-d] Don't miss a space
David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. __ 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/
Re: [css-d] Don't miss a space
On Nov 23, 2014 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. You are correct Phil, there are a few widths on the way down where things overlap a bit. There is an A/B test currently running that displays a different herospace image and layout of the form and three blocks. As a result of having to pull off three designs with the same markup there are simply more variables than we could reasonably account for. As a result I accepted that there would be some discrepancies (as you have observed) and as long as they did not prevent the user from interacting with the form and, more importantly, did not occur on the actual devices we tested on, that they were acceptable. It is definitely not ideal. This site was a pretty fun challenge: The design is not mine and Drupal presents some interesting hurdles as far as the markup goes. Trying to pull this off with those constraints was actually pretty fun. Come Monday, I'll see if I can dial in the behavior you noted, Phil. Thanks for the feedback. Tim __ 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/
Re: [css-d] Don't miss a space
On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. Granted. Cruel and unusual punishment, though. Just getting Drupal to work at default is enough to tax even Leonardo... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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/
Re: [css-d] Don't miss a space
On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com wrote: I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.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/
Re: [css-d] Don't miss a space
nov 23 2014 13:40 David Laakso laakso.davi...@gmail.com: Just getting Drupal to work at default is enough to tax even Leonardo… I think that might be why Perch http://grabaperch.com/ was invented. __ 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/
Re: [css-d] Don't miss a space
MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /divfooter role=contentinfo Philip Taylor __ 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/
Re: [css-d] Don't miss a space
I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. __ 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/
Re: [css-d] Don't miss a space
While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. On Sun, Nov 23, 2014 at 10:50 AM Crest Christopher crestchristop...@gmail.com wrote: I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. __ 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/
Re: [css-d] Don't miss a space
On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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/
Re: [css-d] Don't miss a space
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 Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:01 AM While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 10:49 AM I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher __ 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/
Re: [css-d] Don't miss a space
Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM 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 Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:01 AM While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 10:49 AM I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers __ 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/
Re: [css-d] Don't miss a space
On Nov 23, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /div footer role=contentinfo Philip Taylor LOL! 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/
Re: [css-d] Don't miss a space
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 ---
Re: [css-d] Don't miss a space
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
Re: [css-d] Don't miss a space
nov 23 2014 17:58 Crest Christopher crestchristop...@gmail.com: Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Just pick a few numbers and resize upwards slowly from the smallest and watch what happens with your design. Pick breaking points where you have notice serious layout issues and adjust it going from there. In the beginning you probably can just start out with the MQs in any of the available mobile boilerplates, also if you don’t use these in full, and take it from there. It’s better to just start with just a few MQs and a really simple layout than to ponder on what to do. Experiment! Again, I’d argue that it’s always best to let the content guide the design. Acknowledging content gives you limitations on what you can do, which should stimulate your design creativity. And mobile design is even more about the content itself. __ 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/
Re: [css-d] Don't miss a space
Crest Christopher composed on 2014-11-22 19:46 (UTC-0500): How do you accommodate most, if not all screen sizes. Let the browser produce its innate functionality at instead of constraining it: 1-Pretend px, pt, cm, mm, in and other non-relative units do not exist in CSS. 2-With one exception, which you can take care of with one MQ, care not how wide the viewport is. The exception is to query for landscape vs portrait, where in the latter you may want to drop one or more columns below or above instead of placing beside. #1 you can't do entirely, but it shouldn't be your sizing focus, because, sizing in px,: A-your focus is on a unit that disregards the nearly infinite possible physical permutations of user screen characteritics (width, height, pixel density, luminosity, viewing distance, etc.) B-makes you work harder doing things the computer is supposed to do (easily, and accurately) instead of you How many MQ breakpoints are you going to have, for both portrait and landscape, when the tiniest screens remain only 120px wide (in portrait) but the most dense have grown to well upwards 20 times that? Granted, a CSS px isn't the same thing as a device px, or at least, often won't be. Why should you concern yourself with whether or not or how much if it isn't necessary to get the perspectives you want? Regardless the ratio between them on any particular screen, the px unit still disregards the user completely, taking absolutely no account of how big the user wants or needs things on his screen to be in order to be useful. The angular definition of a CSS px in the standard doesn't address size in terms of what a user needs or wants. Unless you and your users are in position to agree on px sizes that work, it's rude for you to assume they work for anyone else but you. That the px unit ever got into CSS for any purpose except pixmap management was a travesty. You'll still need px for math to arrive at the image sizes you'll use, once per image placement. You'll also use px, again once, for each screen you test with, to determine how many px it takes on your own screen(s) to make up one unit of the size that is your sizing focus. That unit can be any of em, rem or ex, or a mixture of any of the three. Percent you'll use only secondarily. If your development screen's browser default size in px is 32, and its fullscreen viewport width 2548 (give or take, 2560 screen resolution), you get 79.625rem units of width to work with. If you want main content width, e.g. full paragraphs, to use roughly half *your* screen width, you make your P or P container 40rem wide. If you want a left column to be about 20% of your screen width, 20% of ~80 is 16rem. Add main and column together to get a 56rem outer container width. If you want an image inset to the right side of paragraph to be 50% of the paragraph width, declare width: 50%. If you want it centered, do it same as always. When you're done, whatever whitespace remains at the sides are whatever it is. Who cares? Your content is the size you made it, based on your local environment, to produce the perspectives that are the essence of your design. Now the guy with a different size and density screen loads your page, yet the same perspectives result. Instead of you, the computer calculated how many px it took to do it, the same way it did on yours. If his default font size is 16px, the size in px will be less, yet it will be based on a physical size he chose, and the content will have the same *relationships*, same look, same perspectives, you chose, maybe with wider or narrower whitespace beside content because his screen's aspect ratio is different from yours, but the main content will still be 40rem wide, the left column will still be 16rem wide, and the image will still be 50% the width of the paragraph, all nice-sized from viewer's perspective, because the foundational size (1rem) is the very size he found optimal (presumptively, which is why his browser default is set to it, whether actively so or not). He doesn't need zoom, and you and/or MQ don't have to figure out how many px it takes to produce your design on his screen. You have no need to concern yourself with whether a user's browser is using the whole screen or some portion thereof. It turns out those who need bigger objects go for bigger windows, and those who need the biggest tend to go fullscreen, and tend to skip even trying with miniature screens. The people who like small may fit your 56rem wide page into a half screen width window anyway because they're using a smaller default size. Those who need it to fit with big text use bigger windows. You don't need to change anything for both to be happy, just do a respectable testing job to ensure your expectations have adequate flexibility across varying conditions. Use CSS to declare the *perspectives*, not px, in your total design. Then the user's browser figures out how many px it takes to produce your perspectives on his screen. That's polite;
Re: [css-d] Don't miss a space
I understand, you take the pages max width, whatever that may be then do the math, in your example, you used 960px. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 12:14 PM Normally what I do is have my page width be 100% of the viewport until I reach my desktop breakpoint. At that point my page max-width will be in effect. Typically we max our page content at 960. So it's at this point I start working with percentages based on a max of 960. Obviously, use your own parameters for your page. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:58 AM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM 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 Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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/
Re: [css-d] Don't miss a space
If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well, into an extremely narrow container/div that looks horrible ? Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 12:14 PM Normally what I do is have my page width be 100% of the viewport until I reach my desktop breakpoint. At that point my page max-width will be in effect. Typically we max our page content at 960. So it's at this point I start working with percentages based on a max of 960. Obviously, use your own parameters for your page. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:58 AM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM 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 Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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/
Re: [css-d] Don't miss a space
24 nov 2014 kl. 02:26 skrev Karl DeSaulniers k...@designdrumm.com: With firefox, you can set different screen sizes in their responsive layout mode. VERY helpful. We have mentioned the new Firefox Developer Edition, right? https://www.mozilla.org/en-US/firefox/developer/ IMHO the Firefox tools is all I need. Maybe Espresso once on a while. __ 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/
Re: [css-d] Don't miss a space
On Nov 23, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /div footer role=contentinfo” OMG, that was serious. So you’re implying that your tools PREVENTS you from doing mistakes? So what are these tools then? Maybe a more reasonable question to answer here would be how fast such a user error can be fixed in a CMS when it is discovered. That’s much more interesting than to pretend your own code is always perfect. Are you certain there is never code errors in sites built with popular CMS products out there. Are you certain no site you’ve built contain even the slightest error? If so, I must bow to your superior coding. Care to make this viewpoint interesting? I bet you $1000 I can fix such a user error in Perch, which I don’t use, significantly faster than you can in Drupal. I can find a third party, that you will trust, that can set up such at test with timers. Are you a man or a mice? __ 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/
Re: [css-d] Don't miss a space
nov 24 2014 07:00 MiB digital.disc...@gmail.com: Are you a man or a mice? I most certainly meant to ask ”Are you a man or a mouse”? My apologies for that grammatical error. You see how easy we mere mortals can make an error like that? A code god like you, Philip, surely would have a field day with me. C’mon now. __ 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/
Re: [css-d] Don't miss a space
nov 24 2014 07:25 Crest Christopher crestchristop...@gmail.com: This version of the Developer Tools seems ten times more better then the version I have in 33.1 (33.1.1) just released, literally at the time of me writing this message/email. I also like Chrome tools and the Developer Tools add-on for both Chrome and Firefox, but this new one is my new default developer browser. __ 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/
