移动设备上的css网页设计

我想知道像素是如何从一个屏幕尺寸翻译成另一个网页。举例来说，我指定 margin-left：50px;

，如果我在我的iPad的WebView加载该网页，我测量它（用尺子软件，在PX）这的确是50px的如果我在我的桌面浏览器加载该网页，它的确是50px的但当负载这个网页在我的iPhone的Web视图（这需要整个iPhone屏幕），它被测量为40px，而不是我指定的50。

当然iphone屏幕比较小，需要做一些缩放我猜..？是对的吗？
这个转换是如何完成的？过程是什么？有没有一些公式？
这对设计师来说意味着什么？我如何知道我应该分配的正确大小，所以布局不会在所有屏幕上都打破？
我通常先在大屏幕上编码，然后看它如何在小屏幕上运行。这是正确的做法。

我要为＃2的好，大的答案，可以有人帮

来源

2012-03-23 user1118019

采取我认为你只是exagerating的事实，向_new Web开发。可怕的数学，它不是一个火箭科学。相信自己。据我所知1,4是正确的。 3）如果你对布局使用jQuery Mobile来渲染你的网页非常特别（它对浏览器和移动浏览器来说也是一样）。 – uday 2012-03-23 17:22:44

我强烈建议你看看相对大小......它将相对于设备。查看任何有关响应式网页设计的文章。硬像素值是否定的，如果你得到百分比和相对大小，它通常会解决很多问题。现在，如果你是新开发Web开发人员，你需要在进入响应式之前进行一些学习。你也可以做一些关于媒体查询的研究。只是媒体查询它的临时解决方案。

来源

2012-03-23 18:31:29 cschneider27

我建议你看看jQuery Mobile的和视口。基本上你需要设置所有的百分比而不是固定的宽度，因为每个设备都有不同的屏幕尺寸+你需要考虑水平和垂直视图。

这视窗元可确保页面尺寸屏幕宽度的100％，在任何情况下：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

来源

2012-03-23 17:16:45

你已经覆盖身体的保证金？某些浏览器具有不同的默认值。如果你看一下IE6，你会发现这样的事情：

“对身体IE 6默认余量为15像素（顶部和底部）10px的（左和右）”

这是一个很好的做法，对具有一些默认值的CSS文件重置浏览器的默认值。

来源

2012-03-23 17:22:32 koalabruder

@media（最小宽度：1200像素）{

@media（最大宽度：980px）{

@media（最大宽度：979px）{

@media（分-width：980px）{

@media（最小宽度：768px）和（最大宽度：979px）{

@media（最大宽度：768px）{

个

@media（最大宽度：767px）{

@media（最大宽度：480像素）{

从的Joomla 3.0

来源

2013-05-21 09:26:11

移动设备上的css网页设计

回答

相关问题