WebApp 从0到实战

Sweety
218 阅读6分钟

01、适配前知识

01、一些概念

1）屏幕大小： 6.0 寸 5.5 寸 ..... 屏幕大小指的是对角线长度。

iPhone4:  3.5
iPhone6:  4.7  
iPhone6P: 5.5

寸 是 英寸    1英寸 = 2.54CM

2）屏幕分辨率： 1000 * 2000 出厂就定死的。

1000指的水平方向上发光点的个数。 2000指的是垂直方向上发光点的个数。

显示分辨率是可以修改的。

屏幕分辨率 >= 显示分辨率

iPhone6: 750 * 1334

屏幕分辨率 = 设备像素 = 物理像素

3）屏幕密度（了解）： 是指屏幕上每英寸里包含的物理像素点个数，单位是 ppi （pixels per inch）

屏幕分辨率： 1000 * 2000 
屏幕尺寸： 5寸

PPI = (1000*1000 + 2000*2000)开根号 / 屏幕尺寸

4）CSS中的单位：

绝对单位：
    cm   mm   in .....
相对单位
    em   和fs有关     fs是16px   1em=16px    fs是20px    1em=20px
    rem
    vw
    vh

5）pixel到底是什么:
w100px h100px
pixel 是 px全称

1个px就是一个像素点   一个像素点不一定是正方形。

像素的分类：
    1）CSS像素   
    2）设备像素    也叫物理像素，说白了，就是分辨率
    3）设备独立像素  也叫逻辑像素，出厂时定死

CSS像素，之前学习css时，编写的100px 100px指的就是CSS像素。

物理像素就是一个发光点。

6）物理像素和CSS像素有什么关系？

div{ w:100px; h:100px; }

在PC端，1个CSS像素会映射成1个物理像素，说白了，就是1个CSS像素，映射成1个发光点。

7）设备独立像素：

对于我们开发者来说，我们面对的不是物理像素，而是设备独立像素。

iPhone5    设备独立像素是：320   DPR = 2
iPhone6    设备独立像素是：375   DPR = 2
iPhone6P   设备独立像素是：414   DPR = 3

设备独立像素 与 物理像素关系：

  1. 普通屏幕下 1 个设备独立像素 对应 1 个物理像素
  2. 高清屏幕下 1 个设备独立像素 对应 N 个物理像素

设备独立像素 与 css像素关系：

  1. 在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素

把电脑上的网页装到手机上，分两步：

1）把网页放到虚拟容器中，这个虚拟容器通过是980     这个980可以称为布局视口
2）把虚拟容器压缩后，放到手机中，手机的宽度通常是远小于虚拟窗口
3）导致网页中的盒子都会被压缩，我们看到的网页内容都变小了

如何做让它不变小？

1）想办法让虚拟容器不压缩
2）设置虚拟容器的大小    设置成和手机的宽度一样的    手机的宽度指设备独立像素，也就是视觉视口

8) 视口分两类： 1、布局视口 2、视觉视口 2、理想视口

设置视口： 自动生成的： 

考拉的：
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

淘宝的：
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

网易云音乐：
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

小米：
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover">

02、媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

1）媒体查询的使用方式一 image.png

    有一个盒子，在不同屏上，显示不同的大小？
    
    答：需要知道，当前页面所在屏的大小。根据不同的屏，给盒子设置不同的大小。
        320屏   div{ w:100px; h:100px; } 
        375屏   div{ w:120px; h:120px; } 
        414屏   div{ w:150px; h:150px; } 

    如何知道当前网页所处屏的大小？
    答：媒体查询

    媒体查询：
        使用方式有三种，常用的只有一种。

2）媒体查询的使用方式二

image.png

 <link rel="stylesheet" media="screen and (max-width:800px) and (min-width:400px)" 
      href="./css/base.css">
      屏幕宽度大于800，小于400的时候，body背景颜色为红色；

2）媒体查询的使用方式三（最常用）

image.png

03-移动端适配

适配：一个盒子，在大屏上显示的大一点，在小屏上，显示的小一点。

移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。

1）引出适配

image.png

2）rem单位

image.png

3） rem配合媒体查询适配1

如何使用rem来适配，那么流程如下：

得到设计图 一般情况下，大部分的设计图，宽度是750px。
通常我会把浏览器的模拟器，也调整成750px。
严格按照设计图，去还原设计图，需要适配的盒子，都使用rem做单位。
开始写样式，对于750模拟器，我通常会调整它的html标签的font-size是100px。叫基准值。
如：一个盒子，宽度是30px，高度是55px。换成rem，w=0.03rem h=0.55rem。
说白了，最设计图，量出尺寸，需要适配的盒子，换成rem，就是px / 100 就是rem的数值。
到此，你不要去管其它屏，你就老才实实地，在750的屏上，把设计图还原。
等你页面写完后，开始适配，你需要把你写的750的页面，迁移到其它屏，这个过程，适配。
说白了，就是设置其它屏的html的font-size大小。

image.png

4）rem配合媒体查询适配2

image.png image.png

5）rem配合js适配

方式1

image.png

     < !-- 
    
    上盒子让屏幕一半
        750的屏: html的fs为75px      1rem = 75px          375px转rem 5rem
        375的屏：html的fs为37.5px    1rem = 37.5px         5rem
        320的屏：html的fs为32px      1rem = 32px           5rem
        414的屏：html的fs为41.4px    1rem = 41.4px         5rem
         
        转换成单位为rem
        要么前面好算要么后边好算
 -->

<script src="./lib/lib_flexible.js"></script>

   .box{
        width: 1.64rem;
        /* 123/75 */
        height: 6.08rem;
        /* 456/75 */
        background-color: gold;
    }
    <body>
<!-- 
    设计图：750px
        有一个盒子  w:123px    h:456px
 -->
 <div class="box">

 </div>
 </body>

手动换算

  1. 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；

  2. 比如有一个在375px屏幕上，100px宽度和高度的盒子；

  3. 我们需要将100px转成对应的rem值；

  4. 100/37.5=2.6667，其他也是相同的方法计算即可；

方式2

image.png

< !-- 第一步：写视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第二步：引入adapter -->
<!-- 
    flexible原理：
        750的屏： html的fs：100px    1rem = 100px
        320的屏： html的fs：42.6666px
        375的屏： html的fs：50px
        414的屏： html的fs：55.2px
        750/375=100/x
        .....
 -->
 <!-- adapter.js 计算不同屏的html的fs -->
<script src="./lib/adapter.js"></script>
<style>
    .box{
        width: 1.23rem;
        /* 123/100 */
        height: 4.56rem;
        /* 456/100 */
        background: gold;
    }
</style>
</head>
<body>
<!-- 
    设计图：750px
        有一个盒子  w:123px    h:456px
 -->
 <div class="box">

 </div>

方式3

image.png 安装VSCode插件：

（1）搜索px to rem如下：

image.png （2）点击设置按钮

image.png

（3）cssrem

image.png

方式4

postcss-pxtorem

  1. 目前在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化

6）适配方案 - vw

< !-- 
    vw 和 vh:
        v 是 viewport  是视口  
        vw 是 viewprot width的简写
        vh 是 viewport height的简写

    vw:
        1vw 代表理想视口宽度的1%   10vw代表理想视口宽度的10%   100vw代表理想视口宽度的100% 

    vh:
        1vh 代表理想视口高度的1%   10vh代表理想视口高度的10%   100vh代表理想视口高度的100% 
 -->

image.png

vw的单位换算

方案一：手动换算

  1. 比如有一个在375px屏幕上，100px宽度和高度的盒子；

  2. 我们需要将100px转成对应的vw值；

  3. 100/3.75=26.667，其他也是相同的方法计算即可；

方案二：VSCode插件

  1. px to vw 的插件，在编写时自动转化

第一步：写视口 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        font-size: 10vw;
        /* 一个字占10% */
    }
    img{
        width: 50vw;
    }
    /* 安装一个插件(px to vw)，使用插件把px转成vw */
    .box{
        width: 16.4vw;
        height: 60.8vw;
        background-color: gold;
    }
</style>
<body>
<!-- 
    有一个设计图： 750px
        w:123px    123/7.5 = 16.4   (123/750)x100
        h:456px    456/7.5 = 60.8
 -->
<div>孤舟蓑笠翁独钓寒江雪</div>
<img src="./imgs/01.png" alt="">
<p class="box"></p>

方案三：postcss-px-to-viewport-8-plugin

  1. 和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化；
avatar
文章
阅读
粉丝