移动设备上的 css 网页设计答案

【问题标题】：css web design on mobile devices移动设备上的 css 网页设计
【发布时间】：2012-03-23 17:13:07
【问题描述】：

我是网络开发的新手。数学也很差

我想知道像素是如何在网页上从一种屏幕尺寸转换为另一种屏幕尺寸的。比如说，我指定左边距：50px；

如果我在我的 ipad webview 中加载此网页，我测量它（使用标尺软件，以 px 为单位）它确实是 50px 如果我在我的桌面浏览器中加载这个网页，它确实是 50px 但是当在我的 iphone webview 中加载这个网页时（占用整个 iphone 屏幕），它被测量为 40px，而不是我指定的 50。

确定 iphone 屏幕更小，我猜它需要做一些缩放..？对吗？
这个转换是如何完成的？过程是什么？有什么公式吗？
这对设计师意味着什么？我怎么知道我应该分配正确的尺寸，所以布局不会在所有屏幕上中断？
我一般先在大屏幕上编码，然后看看它如何在小屏幕上运行。这是正确的方法吗？

我想要一个关于#2 的好答案，有人可以帮忙

【问题讨论】：

我认为您只是在夸大 Web 开发新手这一事实。数学也很糟糕 这不是一门火箭科学。相信你自己。据我所知，1,4 是正确的。 3) 如果您对布局非常讲究，请使用 jQuery Mobile 来呈现您的网页（浏览器和移动浏览器的呈现方式相同。）

标签： css mobile web mobile-safari

【解决方案1】：

你是否覆盖了正文的边缘？一些浏览器有不同的默认值。如果您查看 IE6，您会发现如下内容：

"IE 6 默认页边距为 15px（上下）10px（左右）"

最好有一个带有一些默认值的 css 文件来重置浏览器的默认值。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

此视口元数据确保页面大小在任何情况下都为屏幕宽度的 100%：

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

【讨论】：

【解决方案4】：

@media（最小宽度：1200px）{

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

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

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

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

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

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

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

取自 Joomla 3.0

【讨论】：