25.移动端像素比

像素简介

1.基本概念

像素

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

分辨率：1920 x 1080 说的就是屏幕中小点的数量

在前端开发中像素分成两种情况讨论，css像素和物理像素

物理像素，上述所说的小点点就属于物理像素，凡是截图工具量出来的都是物理像素。

css像素，编写网页时我们所用的像素就是css像素

浏览器在显示网页时，需要将css像素转化为物理像素后再呈现

一个css像素最终由几个物理像素呈现，由浏览器决定；
默认情况下pc端，一个css像素 = 一个物理像素 1:1

视口（viewport）

视口就是屏幕中用来显示网页的区域

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

默认情况下：

视口宽度 1920px（css像素）

1920px（物理像素）

此时，css像素和物理像素的比值为1:1

放大两倍的情况：

视口宽度 960px（css像素）

1920px（物理像素）

此时，css像素和物理像素的比值为1:2

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

移动端

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰

显示屏 24寸 1920 x 1080

iphon6 4.7寸 750 x 1334

智能手机的像素点，远远小于计算机像素点

问题：一个宽度为900px的网页在iphon6中要如何显示？

默认情况下，移动端网页都会将视口设为980像素（css像素）

以确保pc端网页可以在移动端正常访问，但是网页宽度超过了980像素，移动端浏览器会自动对网页进行缩放以完整显示网页。

一个查看屏幕像素比的网站：https://www.25xt.com/screen/phone.html

所以基本大部分的pc端网站都可以在移动端中正常浏览，但往往都不会有一个很好的体验，为了解决这个问题，大部分网站都会为移动端单独设计一个网页。

像素比

移动端默认的窗口大小是980px（css像素）

默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）

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

编写移动端页面时，必须确保有一个合适的像素比：（上图中的密度）

1css像素对应 2个物理像素1:2

1css像素对应 3个物理像素1:3

......

完美视口

可以通过meta标签设置窗口大小

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值就会有一个最佳效果。

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

以iPhone6为例最佳的像素比为1:2（上图中的密度）

计算最佳视口大小：750/2 = 350

<!-- 设置视口大小 -->
    <meta name="viewport" content="width=375px">

效果

但是这种限定写死的视口大小只适用于iPhone6，其他设备上就不一定是完美视口了。

有没有一种方法让页面在不同分辨率的手机上都是完美视口呢？

当然有，width=device-width在任何设备上都是完美视口

<!-- 设置视口大小 device-width表示设备的宽度(完美视口) -->
   <meta name="viewport" content="width=device-width, initial-scale=1">

initial-scale=1表示初始化缩放倍数等于1倍，效果和 width=device-width一样，一般情况下用一种就可以，

考虑到极端情况，比如横屏竖屏切换，还是两种都用的好。

结论：以后再写移动端的页面，就把上面这玩意写上。

vw单位

不同的设备完美美视口的大小是不一样的

iPhone6 --375

iPhone6plus --414

由于不同设备视口和像素比不同，所以同样的375个像素在不同设备下得意义是不一样的，

比如iPhone6中 375就是全屏，而到了puls中就会少了一块

说以在移动端开发中就不要使用px来进行布局了

vw表示视口的宽度（viewport width）

100vw = 整个视口宽度

1vw = 1%视口宽度

vw这个单位永远相对于视口宽度进行计算

.box1 {
            width: 100vw;
            height: 100px;
            background-image: url(./img/backimg.jpeg);
        }

二（三）倍图

根据不同的视口的像素比，分为2倍图，3倍图等；

我们常用的就是2倍图和3倍图，应为兼容性比较强。

有道单词书界面

单位换算px-->vw

上面有道图是一个三倍图，应为找不到素材所以手机截的屏，图片大小1080 x 2340。直接在浏览器手机窗口打开只能显示1/3。

设计图是

1080px

使用vw做单位

100vw

创建一个 426px x 155px 大小的元素

100vw = 1080px（设计图像素）0.0925925925925925vw = 1px

39.444vw = 426px（设计图像素）

14.352vw = 155px（设计图像素）

.box1 {
            width: 39.444vw;
            height: 14.352vw;
            background-color: red;
            border-radius: 30px;
        }

vm适配

网页中字体大小最小为12px，不能设置一个比12像素还小的像素，如果设置了一个小于12px的字体，则字体自动设置为12px。

这种情况在2022年新版本的浏览器如，火狐、edge上已经不适用了，网页中的字体不再做限制，可以比12px小。

所以在一些新版本浏览器上，rem适配方法已经可以使用了。

rem单位

1rem = 1html字体大小

在此图中

1rem = 1html = 1px = 0.0925925925925925vw

我们可以在html设置字体大小

        html{ 
            font-size: 0.0925925925925925vw;
        }
        .box1 {
            width: 426rem;
            height: 155rem;
            background-color: red;
            border-radius: 30px;
        }

有道单词本界面设计

html代码

查看代码

 <!DOCTYPE html>
<html lang="">

<head>
    <title></title>
    <meta charset="UTF-8">
    <!-- 移动端设置完美视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 清除样式 -->
    <link href="css/reset.css" rel="stylesheet">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <body>
    <!-- 创建整个视图上半部分容器 -->
    <div class="upper-part">
        <!-- 创建头部 -->
        <ul class="topbar">
            <li class="fas fa-signal"></li>
            <li class="fas fa-signal"></li>
            <li><span>17:06 …</span></li>
            <li class="fas fa fa-wifi"></li>
            <li class="fas fa fa-battery-3"></li>
        </ul>
        <!-- 工具按钮 -->
        <div class="tool-but">
            <button class="setter">设置</button>
            <div class="function">
                <i class="fas fa-ellipsis-h"></i>
                <span>|</span>
                <i class="fas fa-times-circle"></i>
            </div>
        </div>
        <!-- 打卡提醒 -->
        <div class="reminder">
            <span>今日未打卡</span>
            <ul class="days">
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span><i class="point">.</i></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
            </ul>
        </div>
        <!-- 标题卡片容器-学习复习 -->
        <ul class="headline">
            <li class="row1">
                <span class="item1">四级英语词汇<i class="fas fa fa-angle-right"></i></span>
                <span class="item2">更换</span>
                <div class="item3"><i class="fas fa-earth"></i>听单词<i class="fas fa fa-angle-right"></i></div>
            </li>
            <li class="row2">
                <span>5/2607 <i class="fas fa-info-circle"></i></span>
            </li>
            <li class="row3">
                <div class="study"><span class="span-big">学习</span><i
                        class="fas fa fa-window-minimize"></i><span>待学习20</span></div>
                <div class="review"><span class="span-big">
                        复习</span><i class="fas fa fa-window-minimize"></i><span>待复习20</span></div>
            </li>
        </ul>
    </div>
</body>

</html>

css代码