本篇文章是根据个人在工作和学习的一些收获和体会,会从如下几个方面来进行阐述:
- pc像素
- 手机像素
- 完美视口
- 适配单位
像素
这个部分我们要聊到像素和视口两个概念
什么是像素?
- 简单来说,屏幕是由一个一个的发光的点构成的,这个一个个的小点就是,我们所说的像素
- 分辨率:1920 × 1080 说的就是屏幕的小点的数量
- 在前端开发中,像素要分两种情况讨论:css像素和物理像素
-
物理像素:上述所说的小点点
-
css像素:编写网页时所用的像素
浏览器在显示网页时,需要将css像素转换为物理像素再呈现
一个css像素最终由几个物理像素显示,由浏览器决定,
默认情况下在pc端,一个css像素 = 一个物理像素
-
视口(viewport)
-
视口就是屏幕用来显示网页的区域
-
可以通过查看视口大小,来观察css像素和物理像素的比值
默认情况下,- 可通过浏览器调试工具查看html标签盒模型的宽度,来查看像素,如:
- 物理像素:1280px
- 此时的css像素和物理像素的比值为: 1:1
- 可通过浏览器调试工具查看html标签盒模型的宽度,来查看像素,如:
-
而在放大二倍的情况下:
- 比值为2:1
-
所以我们可以通过改变视口的大小,来改变物理像素和css像素的比值
手机像素
移动端作为本文的重点阐述对象
- 在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
- 点击可查看各种移动设备的屏幕配置
我们观察到 iPhone6为4.7寸 屏幕为 750 × 1334
再例如,24寸显示器的分辨率为 1920 × 1080 - 但是这里我要说的是,智能手机的像素点 远远小于 pc端的像素点
- 那么问题来了:一个宽度为900px的网页在iPhone6中要如何显示呢?
默认情况下,移动端的网页都会将视口设置为980像素(css像素),
以确保pc端网页可以在移动端正常访问,
但是如果网页的宽度超过了980像素,移动端的浏览器会自动对网页进行缩放以完整显示网页。 - 所以基本大部分的pc端网页都可以在移动端浏览器中正常浏览,但往往都不会有很好的体验,为了解决这个问题大部分网站都会专门为移动端来设计网站。
完美视口
上述中提到:
- 移动端网页默认的视口大小为980 css像素
- 所以默认情况下,移动端的像素比是: 980 / 移动端宽度
- 如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比可达 1 / 0.*(一比零点几)
- 这样的像素比非常的不好,会导致网页中的内容非常非常的小,我们必须要确保一个合理的比例以达到良好的用户体验
- 通过改变视口的大小,来改变物理像素和css像素的比值
- 可以通过meta标签来设置视口的大小
- 每一款移动设备设计时,都会有一个最佳像素比,
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小就称其为完美视口- width=device-width 和 inital-scale=1.0
- 这两个其实是一个意思,视口的宽度为完美视口宽度,初始化缩放为1.0倍
- 只是为了确保一些极端的情况下,如设备的横屏竖屏的切换,确保一直有效。
<meta name="viewport" content="width=device-width, inital-scale=1.0">
结论:当我们在编写移动端页面时,加上上面这行代码,以保证完美视口
适配单位
- 我们通过查找资料:
- iPhone6的完美视口大小为375
- iPhone6 plus的完美视口大小为414
- 由于不同设备和像素比不同,所以同样的375像素在ip6显示的是全屏,而ip6 p却缺了一块
- 由此在移动端开发中,就不适合使用px来布局了
这里提出几个解决方案:
- vw
- vw 表示视口的宽度(viewport width)
- 100vw = 一个视口宽度
- 1vw = 1%视口宽度
- vw这个单位永远相当于视口宽度进行计算
- rem
- 1 rem = 1 html 字体大小
- 但是,网页中字体大小,最小是12px,不能设置一个比12px小的字体大小,否则字体大小自动设置12px(0除外)
- 当然你肯定会说,这样算好麻烦,其实,并不麻烦,之后我会写一篇文章来介绍less的基本用法,用这种方式就行得通了。