[136-137]_聊聊像素

像素：

• 屏幕是由一个一个发光的小点构成的，这一个个的小点就是像素
• 分辨率：1920 x 1080 说的就是屏幕中小点的数量
• 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
• 物理像素，上述所说的小点点就属于物理像素
• CSS像素，编写网页时，我们所用的像素都是CSS像素
  1. 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
  2. 一个css像素最终由几个物理像素显示，由浏览器决定，默认情况下在pc端，一个css像素等于一个物理像素

视口（viewport）：

• 视口就是屏幕中用来显示网页的区域
• 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
• 默认情况下：
  • CSS像素（视口宽度）1920px
  • 物理像素 1920px
  • 此时，css像素和物理像素的比是 1:1
• 放大两倍的情况：
  • CSS像素（视口宽度）960px
  • 物理像素 1920px
  • 此时，css像素和物理像素的比是 1:2
• 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

移动端：

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
显示器：24寸 1920 x 1080
iphone6：4.7寸 750 x 1334
智能手机的像素点 远远小于 显示器的像素点

问题：一个宽度为900px的网页在iphone6中要如何显示呢？
默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页，所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！