Iv noticed that around 680px the text on http://www.smashingmagazine.com/ increases in size. This is done with a media query setting the body font-size: 1.1875em. However when you get down to a smaller size like you would be on a phone then the text becomes the normal size again.
Why would they do this? I thought that one of the concepts of responsive design was to give control to the device / user. So if the body text is best at 1em then you simply let the device use its default to determine what size the text will be. But it seems they have decided to override this device default.
Just give size with sp example 12sp. it will take size for all resolution..
Related
I am trying to implement a virtual UI ID card that would look like a card on all devices. I will need 4 rows total and 3 columns. I also would like to have the width about twice the size of the height (2:1 ratio).
1) I considered the border layout. but it seems like it spans the whole screen size. Quickly the size of my card width was like 5 times the size of the height. So that did not visually work. I suspect the Gridlayout would suffer from similar issues.
2) I used the table layout (4 X 3). I tried using padding / margin and it seems like the look & feel of the card UI quickly gets out of proportion on tablets while looking decent on phones since phones seem to naturally have a similar width to a card.
3)I tried specifying widthPercentage as a constraint on the table UI. Again this approach sufferred from similar issues. Since on smaller phones I would have to remove add small percentage margins but on big tablets I may need bigger margins. This can get quickly challenging to get right / test.
I am thinking now of attempting to take one of the following approaches:
1) I am not sure if there is a way to specify the TextField width based on the number of characters. For example when the card issue date grows on tablet it can fit 10s of characters where I want it to fit only couple for moht(mm) and 4 chars for year(yyyy). Is there a way to do that?
2) Can I tell the screen width in inches or mm ? I can implement a function to attempt and scale padding / margins on different screen size.
I appreciate any feedback.
See the Kitchen Sink demo which has the default "cards" mode in the start. It uses grid layout with special cases to fit the columns in a sensible way for Tablets/Desktops.
https://www.codenameone.com/demos-KitchenSink.html
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
I've been trying to learn responsive coding lately, and the books and tutorials i've gone through have been constantly shifting between using ems and percentages. So i was wondering, when is it appropriate to use ems, and when is it appropriate to use percentages?
Just to clarify other answers, ems do NOT cascade but percentages do. Think of it this way: ems are relative to the current element and percentages are relative to the container. So using a percentage to specify the width of a div inside a div will indeed make the inner one smaller (or larger) than the outer one, but using ems to specify the widths of the same nested divs will specifically make them the width you expect them to be. Generally, you should use ems to specify font typography and percentages to specify element sizes, if you are wanting responsive design.
This is really a preference. Some will tell you to set body{font-size: 62.5%;} (which is 10px if the browser's default is 16px) and then use ems from then on. So, if you want a font-size of 22px you would use 2.2em. However, most developers have their own opinions on this matter. Some use percentages always. Some use pixels always.
em is the measurement relative to the current font size, such as:
body{font-size: 16px;}
.someClass{font-size: 1em;} /* 16px */
.someOtherClass{font-size: 2em;} /* 32px */
.anotherClass{font-size: .5em;} /* 8px */
If no font-size value is set for any parent elements in the document, the browser's default (most likely 16px) font size == 1em.
Percentages work similarly in that they are relative to the parent container, as opposed to the parent container's font size.
body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */
The issue to look out for in both scenarios is that they both cascade meaning that if you have two classes set with font-size: 2em and you nest them, you will have 4em on the inner element.
em and % both are good for responsive web design.
As everybody said em is generally used to define font sizes and % for element like <div> sizes.
But I found in my experience that using % for elements when you have fonts inside the element can make you element adjust according to the length of font inside it.
For example, if your statement inside the element is completing in 20px 100% is going to give it 20px and if it got completed in 10px, the 100% of div is gonna give it 10px.
So if you are giving some design to a div where you have some fonts/words inside, better use em for preciseness.
As I am developing an mobile app, I set "width=device-width". However, this would lead be image be magnified to fill the screen when viewing in a normal computer. Of course it should be what it is supposed to do, but would it be possible to make it so that the image would at most appear as big as its original size and no more?
Use css:
max-width: "somethingpx";
i couldn't find any information regarding system tray icons, what size should they be in to get the best possible quality. Should i use more than one size (16x16,32x32,64x64)?
I'm currently using 16x16 .ICO icons and they look disorted.
They are small icons (ICON_SMALL). You can find out the size by calling:
GetSystemMetrics(SM_CXSMICON)
I think it's pretty safe to assume that they are square, but if you are paranoid then you can always inquire about SM_CYSMICON.
On my Windows 7 machine they are 16px in size. But if you are using font scaling then they will be larger. For a 125% font scaling (e.g. large fonts) you will need a 20px icon.
If you don't have a 20px version at hand then the best approach is to generate one on the fly and put your 16px version in the middle of the new 20px icon.
Update
The documentation of NOTIFYICONDATA recommends using LoadIconMetric passing LIM_SMALL which is equivalent to the approach I outline above.
However, the NOTIFYICONDATA topic also says to use an icon resource containing just16px and 32px versions of the icon. That advice is bogus because, as anyone can see for themselves, notification icons under large fonts are 20px icons and LoadIconMetric will have scale from 32 to 20. I would recommend supplying 16, 20, 24, 32px versions.
On XP LoadIconMetric doesn't exist so you'd need to implement a fallback routine.
I believe it's best to create your icon in multiple sizes and let Windows choose the best one. You're never sure how large the system tray is, because different users may have different settings.
That could also be the reason yours seems distorted. Say you're using a 16x16, but you've set Windows to display them 18x18. If you haven't provided an 18x18 icon, it'll be distorted.
See this question and Larry Osterman's answer.