Is there a benifit when using vw, em or % when laying out a mobile site? [closed]

StackOverflow https://stackoverflow.com/questions/14859342

题

I am creating the layout below for smart phones. iPhone, Android and blackberry are the main targets. The layout will stay the same whether it is in portrait or landscape. For landscape it will scale to the width. What I'd like to do is position and size the text no matter what the screen orientation is in the same relative location. The gray boxes represent images. What I am wondering is there any advantage to any particular css unit, vw, em or %, in this scenario?

Wireframe

有帮助吗？

解决方案

I would use %. It is easiest to calculate and is always relative to the screen for outer elements (where their container is <body>) and relative to their container for inner elements. em is relative to the users default font size where 1em = 12 pt. I do not think em would be a good choice for this. However, using em on your text sizes would be a good idea, if you want users to be able to read the content on mobile devices without zooming.

I don't know what vw is, but I found this site: http://snook.ca/archives/html_and_css/vm-vh-units. It also mentions vh units. It seems they are relative to the view port where 100vw is the full width of the current viewport. I fail to see how this is different than 100%.

On images and things I would consider using max- or min- widths or heights.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top