首页 > 代码库 > html5的viewport与css3的媒体查询

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=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的媒体查询