html5的viewport与css3的媒体查询

伴随着移动设备的愈来愈流行，在现代社会中，可能人们手中握着移动设备的时间已经远远大于敲着键盘了，还有各类平板及将来会不断兴起的移动设备，如何让网页在这些设备上更好的显示，成为咱们不断学习、思考的问题。

css的媒体查询建立的响应式网站，就是针对这一问题的。

其实在css2已经支持媒体，在新的css3中更加的具体，让咱们可以更好的书写代码，以保证网页在不一样设备上的布局的合理，使UI显示的更加的精致和优美。下面咱们来举个栗子吧：

<link mete="not screen and (width:800px)"><!--在宽度不为800px-->

<style>

@media (max-width:479px){

/*在宽度小于479px,才生效*/

}

@media (min-width:480px) and (max-height:767px){

 /*在宽度大于480px,小于767px的屏幕里，才生效*/

}

@media (min-width:800px) or (orientation:portrait){

/*至少宽度为800px或方向纵向*/

}

}

</style>

若是只是简单的电脑中缩放显示屏，那么上面的css3已经已经能够很好的知足了，但是咱们如今还要考虑一个重要的问题，在手机端显示会不会出现问题。现实证实仍是会出现问题，手机的浏览器会默认网页是为宽屏而设计的，它会缩小整个页面来适应屏幕的。咱们就须要用到html5的新增的viewport即“窗口”，设置这张网页显示的相关设置。

举个栗子：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

width=device-width：浏览器将页面宽度假设为设备宽度，后面也能够跟数字单位px

height：高度的设置

initial-scale：浏览器初始化页面缩放比例

maximum：容许用户缩放到的最大比例

minmum：容许用户缩放到的最小比例

user-scalable：用户是否能够手动缩放