html5的viewport与css3的媒体查询

标签：style   io   sp   on   问题   代码   bs   html   时间   

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

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=devide-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

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

hight：高度的设置

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

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

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

user-scalable：用户是否可以手动缩放

html5的viewport与css3的媒体查询

标签：style   io   sp   on   问题   代码   bs   html   时间   

原文地址：http://www.cnblogs.com/shirely-2014/p/4111235.html