济南网站建设_济南网站制作_济南网站建设公司
济南网站建设,济南高新技术企业、不满意不收费、独立客户管理后台、五年专注网站建设、百人专业技术团队、千家网站成功经验、万元营销礼包赠送。
咨询热线:15966060780

屏幕像素和css像素的区别

时间:2014-10-26 来源:未知

       当提到浏览器时,我们通常会涉及两种像素:设备像素和css像素。设备像素的行为正如你所预料的那样:如果你的屏幕宽度是1024px,那么你可以再里面并排的放置两个512px宽的元素。

手机像素设置

      css像素则没有那么确定,css像素与屏幕无关,但是与浏览器窗口内的可视区域有关系,这意味着css像素并不一定与设备像素一一对应。在许多设备上,一个css像素对应一个设备像素,而在另外一些拥有Retina这样高分辨率的iphone设备上,一个css像素实际上等于两个设备像素。
       当用户缩放某一个页面时,css像素也会跟着变化。例如,如果用户将网页页面放大到300%时,则css像素的宽和高也会变为原始值的三倍大;如果用户将网页页面缩小到50%,则css像素的宽和高也会减半。但是在整个过程中,设备像素-屏幕-是不会发生改变的,毕竟屏幕只能是那么宽,然而css像素却变化了。确切的说,是在浏览器窗口内可以被看到的像素数发生了变化。
       你需要在整个网页窗口内考虑到两种不同的像素。你有两种不同的视口要考虑:布局视口和视觉视口。
       布局视口月设备像素非常相似,因为他们的度量单位都是一样的,他们与设备的方向以及缩放的级别都没有关系。但是视觉窗口是可以变化的,视觉视口指的是屏幕上可以显示的那一部分页面。
       在移动手机设备上,这便成了一件非常复杂的事情。为了使用户获得“完整互联网体验”,很多设备都会给浏览器返回一个数值较大的布局视口。例如,iphone的布局视口是980px,opera为850px,android的为800px,这就意味着你的整个网页的页面宽度如果为300px的话,那么他在整个iphone屏幕上的网页显示只占到三分之一左右。

上一篇:济南微信网站开发公司
下一篇:手机网站javascript

在线客服

售前咨询
点击这里给我发消息
点击这里给我发消息
点击这里给我发消息
技术支持
点击这里给我发消息
点击这里给我发消息
售后服务
点击这里给我发消息
点击这里给我发消息