html5响应式简介

一、viewport简介

什么是viewport?

通俗来讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

ppk的关于三个viewport的理论

layout viewport:浏览器默认情况下，保证是为桌面设计的网站，还是为移动端设计的网站，都能正常显示，这样情况下把viewport设为一个较宽的值。宽度可以通过document.documentElement.clientWidth。

visual viewport:layout viewport的宽度大于浏览器可视区域的宽度，所以我们还需要一个viewport来代表浏览器可视区域，ppk把这个viewport叫做visual viewport。visual viewport的宽度可以通过windows.innerWidth来获取,但在Android 2,Oprea mini和UC 8 中无法正确获取。

ideal  viewport:浏览器觉得还是不够，因为现在越来越多的网站都会为移动设备进行单独的设计.所以必须还要有一个能完美适配移动设备的viewport。

二、Media Queries简介

能够控制不同大小的屏幕，在其显示出的样式，让来自不同的设备能够有最佳的浏览体验。

两种使用方法？

• 在同一个CSS 档案中，用Media Queries @media 来判断使用者之萤幕宽度，选择载入哪一段CSS。
• 在HTML 的 载入的地方，用media 属性判断使用者之装置/ 视窗宽度，选择载入哪一个CSS 档案。

以上两种则一即可。

@media 方法简介：http://download.csdn.net/detail/qq_19968255/9766999

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！