黑马程序员技术交流社区
标题: 前端学习 [打印本页]
作者: kakey 时间: 2019-10-29 21:34
标题: 前端学习
今天我想分享一下关于H5移动端开发关于视口和像素的一些小小的分享学习总结对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。
2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
viewport（视口）
###3个视口###
layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。
可以通过document.documentElement.clientWidth来获取。
visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。
ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口需要通过viewport meta标签来进行相应的设置。
###像素###
一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。
设备物理像素
设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
CSS像素:px(设备独立像素)
逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript中使用的一个抽象的层。px是相对长度单位，相对的是设备物理像素(device pixel)
注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。
举个例子：
当给一个元素设置width:200px时，到底会发生什么事情？
这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。
用户放大得越大，一个CSS像素覆盖的设备物理像素就越多。因此，这个元素不一定会跨越200个设备物理像素。例如：在苹果的视网膜屏幕上，视网膜屏幕的像素密度是普通屏幕的两倍，那么这个元素就跨越了400个设备物理像素。如果用户放大，它将跨越更多的设备物理像素。
这是我个人的小小总结，大家如果有其他想法，欢迎留言讨论哟~
作者: SZ创客 时间: 2019-10-30 15:21
我拥有宇宙的风，与夏夜相逢。是六月盛景，是清寂长生。
作者: chengjiayu 时间: 2019-10-30 16:47
.我与春风皆过客，你携秋水揽星河
作者: 小黑梅 时间: 2019-10-30 18:26
对一个人的好感，如果超过了四个月，那就不止是好感这么简单了。
作者: 1079591475 时间: 2019-10-31 19:49
当我拥有你，无论是在百货公司买领带，还是在厨房收拾一尾鱼，我都觉得幸福。
作者: 黑马润 时间: 2019-11-1 18:24
海已静，山未青，月落于平行时空。长欢已远，迟眠五更，念心事灯火通明。相遇错失，欢悲照旧，我都承蒙。
作者: tangtie 时间: 2019-11-2 16:36
微信已加，资料已发
作者: tangtie 时间: 2019-11-2 16:37
余生就那么长，还请衷于自己。
作者: 等风初赵 时间: 2019-11-4 14:31
关于全栈，要了解T型理论，先专后全栈，千万别贪多，古人说: 广积粮，高筑墙，缓称王
作者: 娟呀 时间: 2019-11-4 15:32
这一生山高水阔，背过身，便是太阳
作者: 李大哥 时间: 2019-11-4 15:38
.所有的苦难与背负尽头 都是行云流水般的此世光阴
作者: 哎哟琪呀 时间: 2019-11-5 14:02
我把什么比做你 你是一池捞不起的波光粼粼
作者: 夜听雨 时间: 2019-11-24 15:20
不要等待机会，而是要创造机会。现在我来了，希望我们都可以坚持，早日用知识达到暴富
作者: 柠檬leung不酸 时间: 2019-11-29 16:10
生活就像减法，每一页撕去，都不可以重来，所以珍惜每一天，明天你会感谢今天拼命的自己！努力奔跑迎接属于自己的辉煌！
作者: 夜听雨 时间: 2019-12-9 10:20
今天很残酷 明天更残酷 后天很美好,坚持:5_229:}
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |