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

2018-08-19 本文已影响0人陈涛_滴滴

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

3种viewport

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

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

viewport

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

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

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

layout

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

因为移动端的设备太多,宽度不一,所以上面写死的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不缩放，这样就能实现最好的效果，为我们的响应式设计提供了基础

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

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

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

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

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

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