移动设备上的CSS网页设计

时间:2012-03-23 17:13:08

标签: css mobile web mobile-safari

我是网络开发的新手。数学上也很糟糕

我想知道像素是如何在网页上从一个屏幕尺寸转换到另一个屏幕尺寸的。比方说,我指定     margin-left:50px;

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

  1. 确定iphone屏幕较小,我猜它需要做一些缩放..?是吗?
  2. 这次转换是如何完成的?这个过程是什么?是否有某种公式?
  3. 这对设计师意味着什么?我怎么知道我应该分配的正确尺寸,所以布局不会在所有屏幕上中断?
  4. 我通常首先在更大的屏幕上编码,然后看看它是如何在较小的屏幕上运行的。这是正确的做法。
  5. 我希望#2有一个好的答案,有人可以帮忙

4 个答案:

答案 0 :(得分:1)

你是否覆盖了身体的边缘?某些浏览器具有不同的默认值。如果你看看IE6,你会发现这样的东西:

“IE 6默认边距为15px(上下)10px(左右)”

最好让css文件具有一些默认值,重置浏览器默认值。

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

@media(min-width:1200px){

@media(max-width:980px){

@media(max-width:979px){

@media(min-width:980px){

@media(min-width:768px)和(max-width:979px){

@media(max-width:768px){

@media(max-width:767px){

@media(max-width:480px){

取自Joomla 3.0