I just discovered the initial-scale meta attribute.
Previously, I've been using a default.css to define all my styles and sizes (for fonts and elements) so they appear nicely on screen real estates of desktop computers. Then I might use media queries or PHP to include an phone.css or tablet.css if you're using a phone or tablet, and this will adjust ONLY SIZES for smaller devices.
But now that I've become aware of the concept of initial-scale, should I be using that instead to control sizes of elements?
A very important consequence I'm trying to get at is this...I use to define my font sizes with EM (or REM) units like this:
/*desktop.css*/
html{font-size:62.5%;}
p{font-size:1.2em;}
span {font-size:1em;}
/*phone.css*/
html{font-size:125%;}
/*tablet.css*/
html{font-size:100%;}
In other words, my phone.css and tablet.css only adjusts the font-size percentage on the html element, and all other elements will scale accordingly on all different devices. To a certain degree, i do this wiht padding, margins, lineheights and letterspacing.
With the introduction of initial-scale, does that mean EM/REM units are irrelevant for scaling font sizes? We can stick to the much more intuitive PX units? And let initial-scale do the rest of the scaling work?
The thing about the em unit is that it should appear the same across devices and screen densities because the actual height is decided by the client.
I also use the initial scale, min scale, and max scales in a few applications, and have found the px unit to work fairly well, so long as you pick a appropriate value for the scale per device.
Related
I'm finally learning responsive design and I need to know the best practices for em and percentage units of measurement. If I were to set the font-size of the body to be 10px, would I run into problems down the line declaring all font-sizes em's (1em = 10px, 2.5em = 25px, etc.)?
Also, when is the correct time to use em units vs percentages? Are em units mainly for typography, and then percentages would be used for sizing, margin, padding, etc.?
I love the idea that I can scale font-size proportionally at media queries by changing the body font-size, but I don't think I would want my layout and spacing to shift based on the size of text (or do I?).
It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.
rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.
With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.
ok, first if you want using responsive design, i suggest strongly to you to use a framework like bootstrap or fondation to have a responsive design. You seem newbie in that way and responsivity is a bunch of css and preprocessor for most complicate cases.
But, to answer to your question, we dont resize fonts in media queries for most cases. Set per exemple your fonts in rem. So you must test on many devices your responsivity. By layout you must probably mean divs. Best practice is viweport vw (width) and vh (height) except if you want a proportionnal measure inside annother element. In that case, use %. Rem is better than em cause it is root em. The true size of a font difined in html. When the screen become too small on a device, you must collapsing your menu, and the text on your site must goes down in a div. I can continue like this a while, but like i said, use a framework, faster learning and faster development. Most devs like me use frameworks for their clients.
From what I understand I should set a meta tag in the header as mentioned below, use min-width(or min-device-width?) values in media queries building up from the smallest supported size and adding additional CSS via the queries for larger sizes, anything specific to the smallest size only could be defined in a max-width query.
I should also use column classes in my html provided from a grid framework which will apply % width values to my elements/components based on the value of the column class in use(media queries can change this). I'm planning on using Susy with Breakpoint (Sass libs), I'm not sure if Flexbox is a better option.
Choices aside the fluid approach with breakpoints via media queries to alter the layout for smaller screens(or browser windows) is what I'm trying to pickup, though some resources I've been pointed to seem a bit outdated or varying advice/opinions. Please confirm if so far what I've said is fine or if I've misunderstood anything.
1) With the meta tag mentioned, do PX values translate to a consistent physical size(regardless of pixel density) across screens? And is the width property being set the same property width property that Media Queries can also reference?(So it'd now be equal to device-width, or the original value is still referenced?)
2) With regards to being responsive, should I be using PX units? It seems to be suggested and used in many articles these days that I come across, though older ones a few years back were pushing EM/REM units. I've read that fonts defined with PX units don't change if a user adjusts the browsers default font size, but fonts with %/EM/REM sizes do....however EM units can be problematic due to the relative nature if you have parent elements also sized with EM units? REM I don't know too much about yet, other than it wasn't as well supported and should have a PX fallback.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).
Source
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron
I still use EM's in the CSS to specify the sizes of elements in my templates.
Today most browsers are able to correctly scale websites where the sizes are given in PX.
My argument for using EM's was / is: if a person that has a sight disability and changes the base font size in the browser, the design still fits.
I'm asking because for me its still a source of errors to use EM's. When i specify a different font-size then the base font-size on a element, I often forget to adapt my EM calculation for the children elements.
Now i have 2 questions:
How do people with a sight
disability configure the browser (do
they use the browser zoom or do they
still change the base font-size)?
Does it still make sense to use EM's
for element sizes nowadays?
Based on what I've read, neither. Users with mild-to-moderate sight difficulties often use applications distinct from the UA itself to provide zooming functions. These tools can magnify all or part of a display, but (in my limited experience) they don't zoom the text out-of-relation to the setting.
It still makes sense to use 'em'. First of all, accessibility isn't the only reason to use 'ems'. I think the inheritance model of relative sizes makes more sense with ems and percentages than it does with pixels. Second, you can do calculations in CSS3 itself, if it helps you to not need to remember to adapt your calculations.
refs:
http://www.championinternet.com/rwa/Ann.pdf
http://davidbcalhoun.com/2010/does-it-still-make-sense-to-use-em-rather-than-px
http://www.w3.org/TR/css3-values/#calc
Physical dimensions (px) are generally worse than logical (pt, em, %) because physical devices' size and resolution may vary wildly (from a small handset to a desktop screen to a wall-mounted plasma screen). Unless you're tightly bound to a piece of raster graphics, there should not be any disadvantage in specifying dimensions in logical units.
If you always specify font sizes as percent of base size, it's harder to forget to use the logical units :) Also a user can just specify base font size in the browser and your entire design adapts automatically.
When font size is too small for me to read, I zoom a little. Also I specify quite large base size for Japanese pages so that I can make out the glyphs. But if a page resists to adapt to font change, I usually just hit my 'Readability' bookmarklet, and the offending design disappears completely.
I'm still in favor of using EM as a unit. But like you said, modern browser scales size pretty well even with other units.
I think the most important is to always use the same unit across the website. As long as you don't start to mix different unit, the browser should handle everything well.
The only real advantage I see nowadays to use EM, is that someone who has increased is default font size will see your site with bigger elements without doing anything. If you use PX, the person probably have to change the size manually.
I understand the advantages of using ems in favor of static measurements like pixels and points, but why do most of the CSS people out there (SO excepted) prefer using ems instead of % values?
For font sizes:
em and % are both relative to the font size of the parent element (i.e. 2em and 200% always give same result)
ems have a history in typography (although a CSS em is not the same as a typographic em)
Browser implementations of CSS have fewer bugs with % than with em
For everything else (e.g. the width of an element):
em is relative to the font size
% is relative to the parent element
… so they do completely different things and need to be considered on a case by case basis.
Ems are based on a known and consistent value (the font-size) whereas percentage is based on the size of the container. It's much harder to design and understand CSS when the basis of your dimensions and sizes is changing depending on the context (which element/container you are in).
I would imagine that one reason is that a lot of web designers started out as print designers, and so are used to ems as a unit of measurement. That's certainly the case with me.
Give a page 3-column layout with 25%/50%/25%, give it font which allows for 6 lines of article (16% font-size), with 5 articles per page (20% height)
Now imagine it on an embedded device that has screen resolution of 320x200px