前端第十三章 像素重难点精解

第十三章 像素

第一讲.像素简介

屏幕是由一个个发光的小点构成,一个个的小点就是像素

像素在前端开发中要分两种情况讨论:

1. css像素

   在编写网页时所使用的像素就是css像素

2. 物理像素

   一个一个的小点就是物理像素

浏览器在显示网页时,要把css像素转换成物理像素然后再呈现

一个css像素,最终有几个物理像素显示,由浏览器决定

默认在pc端,是1:1

视口:指的是屏幕中用来显示网页的区域,简单来说就是浏览器的窗口

可以通过查看视口的大小,来观察css像素和物理像素的比值

html的宽度就是视口的宽度

默认情况下,视口的宽度是1920css像素,而物理像素,显示器是多少的就是多少像素,比如这个显示器是1920,比例是1:1

当提高网页比例时,视口会变小.

当放大到200%时,视口宽度就变成了960css像素,而显示器只要不换,就依然是1920物理像素,所以此时变成了1:2.

截图工具量出来的是物理像素

我们可以通过改变视口的大小来改变css像素和物理像素的比值

第二讲.手机像素

在不同的屏幕中,单位像素的大小不同

像素越小,屏幕越清晰.智能手机的像素点要远远小于计算机的像素点

手机的像素点小到肉眼不可察觉,被称为视网膜屏.

默认情况下,移动端的网页都会将视口设置为980css像素,以确保pc端网页可以在移动端完整显示

如果网页的宽度超过了980,移动端的浏览器会对网页自动缩放以完整显示网页

所以大部分pc端网站都可以在移动端正常浏览,但是往往不会有好的体验

为了解决这个问题,大部分网站都会自动为移动端设计网站

第三讲.完美视口

移动端默认的视口大小是980css像素

默认情况下,移动端的像素比为 980 : 移动端宽度

如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好的,会导致网页的内容非常小

在编写移动端页面时,必须确保有一个比较合理的像素比

1个css像素对应2-3个物理像素

因此要写移动端页面,第一件事就是将网页的像素比调整到比较合理的范围

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

可以通过meta标签来设置视口大小:

<meta name='viewport' content='width=100px'> 

将视口大小设为100px

每一款移动设备设计时,都会有一个最佳的像素比,一般只需要将像素比设置为该值即可获得最佳效果

将像素比设置为最佳像素比的视口大小,我们称之为完美视口

但是每个手机的大小不同,因此取比例之后的值也不相同,那么就不能将meta中的width设置为固定值

可以将其设置为:device-width 表示的是设备的宽度(完美视口)

<meta name='viewport' content='width=device-width'>

实际应用的是更完美的解决方案:(后面那个是为了得到横屏竖屏切换时的完美适配)

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

在html文件创建时,会自动添加这一行文字,如果没有加,要自己手动加一下

第四讲.vw单位

不同设备的完美视口是不一样的,所以同样的500像素在不同的设备下意义是不一样的

所以在移动端开发时,就不能使用像素来布局了

如果用百分比进行布局呢?

我们的百分比指的是占用父元素的百分比,因此每个元素的100%所代表的像素大小是不同的,使用起来十分麻烦.

因此我们引入了一个新的单位:vw

它表示的是视口的宽度. 100vw=1个视口宽度

vw永远是相对于视口宽度来进行计算.

可以在移动端随意使用,不需要担心兼容性问题

现在的移动端设计图像素宽度常为750px或者1125px

第五讲.vw适配

100vw=750px则0.1333vw=1px;

但是这样表示过于麻烦,我们需要一种方法更加便捷的表示每个设备的1px

5.333vw=40px;

我们之前提到过一个单位为:rem,它的用法是:1rem=1html字体大小.

那如果我们将字体大小设置为5.333vw,则一个html字体大小就是750像素中的40px.

这样1rem=40px,再用rem进行表示,就可以简单很多

html{
    font-size:5.333vw;
}
.box1{
    width:18.75rem;
    height:0.875rem;
}

不直接使用0.1333vw是因为:网页中的字体大小最小为12px,如果我们设置了一个小于12px的字体,则会自动变成12px,那么我们使用的vw实际上就无效了

注意:移动端是用手指点击,因此没有hover的概念

想给一个区域设置上溢出的部分带滚动条,只需要:

overflow:auto;

这样就只会它自己带滚动条,而不是整个网页都可以滚动