Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I know responsive units like rem were introduced to make a page properly zoomable, but I wonder if there is any other use case, if modern browsers zoom px-based values, too? They even treat px-based media queries responsively nowadays: if I zoom into a responsive website far enough, it will switch to the mobile layout.
Thank you.
EDIT:
I only know one use case myself: If you want users to set the font-size dynamically on a page (e.g. like in a ebook reader app something like this).
rem was not introduced to make a page "properly zoomable", it was introduced to allow the sizes of things to be set relative to the base font size.
Having content scale based around the font size the user is comfortable reading is useful.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
On new, responsive projects, is there any good reason to use pixels for production environment (besides in media queries) if there are responsive units such as rem (and in conjunction with 62,5% trick)?
Yes, it makes sense. I use rem inside media queries and whenever i need a root based units (this is useful only if change the root font size). Then i use pixels when i need an absolute size.
Relative units are still useful. You don’t have to think that absolute units are “old”. They cover differents use cases.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm using cordova and I have some absolute positioned elements that behave different depending on device resolution. Some text positioned over other elements if the screen is larger, for example.
What do you think is the best css unit to use for distances and position?
Do you have another approach to this kind of problem?
In general I always use rem unless I specify sizes in percent of parent elements. This way you have a single reference for sizes, which helps me mentally relate one thing to another. Also, it all stays consistent when the user zooms.
If you need to make sure certain text has enough space or is abbreviated correctly, it's sometimes necessary to use JavaScript in order to resize based on available and needed space. A common technique is to render a simplified interface if showing on a small resolution. You can detect events like window resize, document load, etc.
If you need a more tailored answer, please make a jsfiddle to illustrate your problem.
Percent should do the job! It will scale according to the resolution.
Or maybe vm / vh is what you're looking for.
http://snook.ca/archives/html_and_css/vm-vh-units
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have been doing some research about what width you should use for your website if you're not using responsive design.
The most mentioned width where:
960px
978px
980px
My question is since most of these posts where outdated, which one is prefered nowdays?
I want it to scale down so good as possible for mobile devices.
Thanks Jack
Number 960 is divisible with pretty much anything (28 factors, which is a lot), that's the reason it's used the most. This not only scales well, but allows you to divide the page into many, many variants of equal-width column numbers.
And it's probably to stay around as a standard for quite a while (until we get much larger/denser displays).
Mobiles nowadays have no trouble scaling whatever you give them, but it's your task to make sure it looks nice and readable when it's scaled down, even if you decide not to use 960.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I be sure that my web site can be viewed in smatphones (with different resolutions and screen's size) without any problem.
Is there a way to convert the couple html/css of a classic web site to be compatible everywhere.
Best regards.
I use http://mite.keynote.com/ to help test websites on mobiles that I don't have physically available. It's not perfect, but it's about the best testing suite I've seen and will definitely give you an idea of whether or not your design will work.
As for the actual design methodology, just make sure you don't specify anything in pixels or points, all dimensions should be specified with em's (or ex, etc) or percentages. From there, it's just a matter or trying things to see if they work.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I essentially want to be able to scale the entire site (images, elements, the whole sha-bang) to what ever browser size window the user is using. Anyone have success doing this and would be willing to share how?
I'm using HTML 5 by the way.
You need to start thinking about sizing your elements using percentages instead of pixels.
Take a look at this simple example and it may help you on your way. Good luck.
http://jsfiddle.net/hACbn/1/
Take a look at using responsive layouts:
Here's a half decent framework to get you started
http://gridpak.com/