目录
一个手机的物理像素个数是固定的。
1、分辨率
每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率。
同样的大小，显示的像素个数越多，分辨率越高，越清楚。
2、1px=1个物理像素？
早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素。
但是随着 Retina（视网膜屏）等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到更高的分辨率，提升屏幕显示的细腻度。
现在的手机大多都采用Retina技术或者更高的显示技术
手机A分辨率：2*2（横向上2个像素点，纵向上2个像素点）
手机B分辨率：4*4（横向上4个像素点，纵向上4个像素点）
有1个宽1px，高1px的元素要显示在屏幕上
如果使用物理像素表示1px。结果就是手机B上显示的要比手机A上小
结论：不能使用武力像素表示元素尺寸
3、逻辑像素
逻辑像素（logical pixel）也叫：①css②设备独立像素（dpi：device independent pixel）
实际开发中使用的像素
.box{
width:2px; /* 逻辑像素 */
height:2px; /* 逻辑像素 */
}
总结：
- 在标清屏下，1个逻辑像素，使用1个物理像素表示，所以盒子中使用2*2个物理像素表示
- 在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用4*4个物理像素表示
- 整体来说，表示同样的一个盒子，高清屏使用的物理像素是表情屏的4倍
- 如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
- css浏览中运行时，浏览器根据当前设备屏幕情况，在即选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与
4、设备像素比
dpr：device pixel ratio
dpr=设备像素/css缩放比是1的情况)
上面值得是同一方向上，也就是谈到设备像素比时，只考虑1个方向
还是这张图
左边的 dpr=1，右边的 dpr=2
所以，dpr=2，就是1个css2×2个设备像素（物理像素）来挥之
5、缩放
物理像素是不能改变大小的
缩放其实就是改变1css像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示
5.1、放大
分析：上面是放大2倍时的效果
- 原来，1个css像素=1个物理像素
- 放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
- 所以，放大2倍后，1个css像素=2×2个物理像素
5.2、缩小
分析：上面是缩小到1/2的效果
- 原来1个css像素=1个物理像素
- 缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
- 所以，缩小1/2后，2×2个css像素=1个物理像素
6、ppi
pixels per inch，表示每英寸的物理像素点，这考研一个屏幕厂商的设计和生产能力
屏幕上的像素点越多，越密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数
ppi 的计算方法
7、二倍图
对于一张50×50的图片在标清屏下打开，1css像素=1个物理像
如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊
解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题
核心思路
- 比如希望在手机屏幕中显示一张100×100的图片
- 先制作一张200×200的图片
- 通过css设置其逻辑尺寸为100×100
- 高清屏下手机浏览器会放大2倍显示，正好是200×200，正好事图片本身尺寸
- 注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都暴露出来，造成模糊效果
还有3倍图，4倍图等
8、视口
视口（viewpoint）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
8.1、布局视口 layout viewport
早期的网页都是为pc端设置的
PC端屏幕相较手机屏幕要宽
为了在手机上也能狗显示这些为PC端专门设置的网页，出现了布局视口的概念
布局视口的宽度一半为980，也有 1024 的
但手机屏幕要小很多，以 iphone6为例，屏幕宽度是375
8.2、视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
8.3、理想视口 ideal viewpoint
很明显，布局视口>视觉视口，所以会在视觉视口中出现横向滚动条 但，很明显，这种体验差爆了。
理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏 览和阅读宽度而设定。需要设置 meta 标签进行设置
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解 就是设备有多宽，我们布局的视口就多宽
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉 视口
9、meta标签（理想视口的设定）
9.1、宽度设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
注意将自动生成的下面代码删除
<meta name="viewport" content="width=device-width, initial-scale=1.0">
当前布局视口的宽度是多少
可见，当前是以 980 作为视口宽度的，那么当980缩小之整个屏幕后，盒子的宽度 也会相应的缩小，所以看起来，盒子的宽度和想想的不一样
如何解决呢？
设置布局视口与iphone6的屏幕宽度一致，也是375，则页面内容就无需缩小
<meta name="viewport" content="width=375">
但是并不是所有的手机屏幕宽度都是375，所以 width 的值不能固定，而是由设备 实际的宽度决定
改成下面这样
<meta name="viewport" content="width=device-width">
9.2、缩放
前面谈到过缩放的问题 页面在首次加载时，可以设置缩放比
<meta name="viewport" content="initial-scale=1">
设置缩放比为1，这行代码的作用与下面同样
width=375
但是考虑到兼容性，仍然建议两个属性都要写
<meta name="viewport" content="width=device-width, initial-scale">
9.3、用户缩放
上面是开发者设置的页面初始缩放比例，手机端浏览器默认是允许用户通过触摸动 作进行页面缩放的
可以通过下面的属性控制
user-scalable=no
完整写法
<meta name="viewport" content="width=device-width, initial-scale">
也可以使用下面的两个属性替代上面的属性
aximum-scale=1,minimum=1
完整写法
<meta name="viewport" content="width=device-width, initial-scale">
当然为了兼容性，建议两种写法都写上
9.4、最终版
最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
最后，完整版的 viewport 代码如下
<meta name="viewport" content="width=device-width, initial-scale">
扫一扫
2366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
