关于前端开发像素的一些记录

像素

屏幕就是由一个一个发光的小点构成的，这一个个的小点就是像素，在前端开发中，像素主要分成两种情况，CSS像素和物理像素

• 物理像素：上述说的小点点就是物理像素
• CSS像素：前端开发中，使用的都是CSS像素，width:100px；…

浏览器在显示网页时，需要将CSS像素转换为物理像素然后呈现，但是一个CSS像素最终由几个物理像素显示，由浏览器和系统等因素决定，默认情况下在PC端，一个CSS像素等于一个物理像素，但是不唯一，可通过视口进行查看具体的像素比值。

视口

视口就是屏幕中用来显示网页的区域，可以通过观察视口的大小来查看CSS像素和物理像素的比值（F12开发者模式->html的大小）

可以通过改变是口的大小来改变物理像素和CSS像素的比值

手机像素

在不同的屏幕上，单位像素的大小是不同的，像素越小屏幕会越清晰
电脑屏幕 24寸 1920x1080
iphone6 4.7寸 750x1334
一般情况下，智能手机的像素点远远小于计算机的像素点

问题：一个宽度是900px的网页怎么在6s手机上显示?

其实6s尺寸中的750是物理像素不是css像素，移动端的网页都会将视口设置为980px（css像素），以确保pc端网页可在移动端正常显示，但是如果网页的宽度超过980,移动端的浏览器会自动对网页缩放一完整显示网页。

基本上大部分的pc端网站都可以在移动端上正常浏览，但是往往体验感都不好。因此，为了解决这个问题，大部分网站都会为移动端设计专门的移动端网站。

完美视口（将像素比设置为最佳像素比的视口大小）

默认情况下，移动端的视口大小是980px(css像素）
默认情况下，移动端的像素比就是980（meta）/移动端的宽度（980/750），如果我们直接在网页上编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常小。
编写移动页面时，必须确保有一个合适的像素比，如1css像素 对应 2个物理像素等等
可以通过meta标签来设置视口大小，来更改像素比

每一款移动设备在设计时，都会有一个最佳的像素比，一般只需要查找资料找到该值并设置即可,代码如下。
<meta name="viewpoint" content="width=device-width，initial-scale=1.0">

结论：以后写移动端，不管怎样，先把上面代码写上