响应式站点2-viewport和media-query

字数 985阅读 82

原文3年多前发表在私人站点,现迁移到简书

3种viewport

以前PC端的网站一般宽度在1000px以上,这种大尺寸的页面如何在手机上展示?答案就是:缩放,所以早期看到的网站都很小,需要双击放大某一部分区域才能浏览。

visual viewport

visuall viewport,显示的屏幕窗口,可以把他理解为放大镜,距离可以拉近一点拉远一点,显示的内容可以缩小可以放大,大致就是下面这个样子:


viewport

比如一个1024px宽的页面,要在320px的手机上显示,可以拉远距离(缩放)全局浏览,也可以拉近只看一部分,并且移动visual viewport来查看网页的不同部分

layout viewport

PC的网页怎么在320px的手机上渲染?这里有个隐藏的概念,就是layout viewport。当我们设置一个width=20%时,他必须知道父级的width是多少,最终必须找到一个设置绝对值的顶层的元素(body)

早期没有专门为移动端做的页面,所以手机浏览器默认的layout viewport都是接近pc的宽度,这样可以确保PC的网页展示都没问题。这里里有每个手机浏览器的默认layot viewport,附个图:

layout

修改layout viewport

layout viewport+visual viewport,PC端网页已经可以在手机上展示了,不过显然还不够完美:能不能不要缩放,不要双击放大以后再拖动来看网页? 假设手机宽度是320px,那就做个宽度只有320px的页面:

<html>
  <body style="width:320px">
    <div class="contianer">
      hello everyone
    </div>
  </body>
</html>
pc viewport

可以看到因为默认的layout viewport是按PC设置的,就算设置一个320px,也会按照PC的效果来展示

ios最早提供了修改layout viewport的能力,我们给上面的页面设置下layout viewport,并且visual viewport不缩放,这样就完美了:

<meta name="viewport" content="width=320px, initial-scale=1.0">
pc viewport

ideal viewport

因为移动端的设备太多,宽度不一,所以上面写死的width=320px是非常不好的。还好设备都有一个ideal viewport,也就是最佳的尺寸,把layout viewport设置成idela viewport,并且visual viewport不要缩放就能达到最好的效果(可能有点绕):

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

width和initial-scale 设置其他值的效果,可以在这里查看:understanding-viewport

小结

设置layout viewport为设备宽度,并且visual viewport不缩放,这样就能实现最好的效果,为我们的响应式设计提供了基础


media query

为不同的设备设置了网页的布局总宽度之后,需要进行区分,以便为不同的宽度设置不同的布局,mediaquery提供了这种能力,它有非常多的属性,不过我们最常用的就是width

    @media (max-width: 480px) { 
        // 隐藏某些元素
    }
    @media (max-width: 768px) {  }
    @media (min-width: 1200px) {
      // 显示某些元素 
    }

恰当的断点很重要,根据2014 css报告,设置最多的是480,768,990,1200,当然可能和bootstrap用的最多有关

device width和width

另外可以再看看device width和width这两个值,大部分时候他们实现的效果是一样的,但是还是有一些细小的差别:

  • device-wdith 指的是设备的宽度,在pc上你改变拖动浏览器窗口的大小并不会改变这个值
  • width:指的是浏览器的宽度

所以使用width会更好,并且在某些android设备上,使用device-width可能会变成device pixel

总结

设置不同的布局宽度、不同宽度设置不同的样式是实现响应式站点的基础。实际使用中,还是有很多细节,比如文字、表格布局、retina 下的图片处理等,以后有机会继续

推荐阅读更多精彩内容