Site in Practical: Site for Mobile

风行水上 @ 2014-10-07 18:14:32
标签:

    视图

    移动端浏览器的窗口通常较小,为了解决网页在移动端上面的显示,通常添加下面的代码以控制视图(viewport):

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

    应尽量避免使用minimum-scalemaximum-scaleuser-scalable。这里依据的原则是尽量少限制用户的选择权。

    • 没有指定视图的情况下移动浏览器默认使用800x1024显示网页。
    • iPhone的宽度可以认为是320px

    字体

    • 基准字体大小为16px
    • 使用相对于基准字体的字体大小定义排版比例。(通常即em)。
    • 可以使用浏览器默认的行高1.2em

    摘自Google的一个字体大小建议:

    body {
      font-size: 16px;
    }
    
    .small {
      font-size: 12px; /* 75% of the baseline */
    }
    
    .large {
      font-size: 20px; /* 125% of the baseline */
    }
    

    自适应布局

    所谓自适应布局(Responsive Layout),主要是指根据屏幕大小调整CSS样式表的内容。实现方法通常如下:

    @media (min-width: 1200px) {
      body {
        width:1200px;
      }
    }
    
    @media (max-width: 600px) {
      .site-slug {
        display:none;
      }
      .site-name {
        display:none;
      }
    }
    

    关于自适应布局的一个建议是从Mobile布局开始,然后逐步“改进”以支持Desktop布局。

    这里的原因应该是基于假设“Mobile布局相对更简单一些”。(TODO)

    独立的Mobiel站点

    毕竟针对Mobile或Desktop的页面设计可能有很大不同。

    一个很容易想到的方案自然是单独为Mobile设计一个站点。这自然是有维护的负担。

    网络资源

    标签:

      分享到:
      comments powered by Disqus

      43/45ms