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

原文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的页面：

  
    

      hello everyone
    
  

pc viewport

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

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

pc viewport

ideal viewport

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

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 下的图片处理等，以后有机会继续