黄莆课程 webApp像素及屏幕rem适配及跑马灯代码实现

视觉基础

1、面试中常见的像素问题

什么是像素？

1.什么是px？
px - 虚拟像素， css像素的单位
px 是一个相对单位，相对于设备像素而言的

相对性
a.相对于同一个设备 css像素是可变的
css像素 === 物理像素 => 会受到缩放的影响
css像素 = 缩放倍数 * 单个物理像素宽度

b. 相对不同的设备，OLED，早期Summer出了AMOLED，一个css像素可变的
=> 1. 相对性 2.设计稿和实际屏幕不绝对

1. DP
  dp - 设备像素 / 物理像素，单位是pt，不是css像素单位

(1pt = 1/72(inch))
=> dp 是一个绝对单位，生产完成后固定不变

3.DIP
dip - 设备逻辑像素 === 虚拟像素
4.DPR
dpr - 设备像素比
初始状态下，物理像素与css像素的初始比例关系
dpr = 设备像素 / css 像素

移动开发中1个css像素具体占用了多少设备像素

*5. PPI
每英寸的像素取值(像素密度) - 衡量单个物理单位内拥有的像素

*6. REM / EM - 动态相对单位
em 是相对于父元素的字体大小，计算得出的单位
rem (root em) 相对于html元素的字体大小

    html {
        font-size: 20px;    
    }
    .father {
        font-size: 16px;    
    }
    .child1 {
        width: 10em;    
    }
    .child2 {
        width: 10rem;    
    }
    // 面试题：问child1和child2宽度具体是多少px？
    对于re来说，相对于父元素， 1em = 16px  => width = 160px;
    对于rem来说，rem是相对于html来对比的， 1rem = 20px => width = 200px;

2.媒体查询 - media

根据设备的大小，设置差异化的样式，从而适配不同屏幕的大小

    // 1. 区分范围
    @media(max-width: 768px){
        body {
             // 可以设置一个小屏幕样式       
        }    
    }
    @media(max-width: 1200px){
        body {
            // 可以设计者大屏幕样式                    
        }    
    }
    通常来说比较经典的px: 768px 992px 1200px ....

// 2. 完整写法
@media mediatype key(media feature){
// style
}
// a.medaitype
// all - 所有设备
// print - 打印预览
// screen - 屏幕状态下
// speech - 语音合成器

屏幕上宽度小于200px时，背景为蓝色 /
@media screen and (max-width: 200px) {
body {
background-color: blue;
}
}
/ 屏幕大小介于501px到999px之间，设置为grey /
@media screen and (min-width: 201px) and (max-width: 500px) {
body {
background-color: grey;
}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
body {
background-color: cyan;
}
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
body {
background-color: red;
}
}
@media screen and (min-width: 1001px) and (max-width: 1400px) {
body {
background-color: orange;
}
}
@media screen and (min-width: 1401px) and (max-width: 1900px) {
body {
background-color: rgb(148, 30, 122);
}
}
/ 屏幕大于1000px，设置为紫色 */
@media screen and (min-width: 1900px) {
body {
background-color: purple;
}
}

// b. key
// and : 多个媒体特性之和。相当于且
// not : 排除某个具体的媒体类型，相当于非
// only : 当且仅当特定的查询

// c.media feature
// 通常使用 width 、 min-widht 、max-width 将屏幕的大小区分开

// 3.链接式

<link rel = "stylesheet" href="./a.css" media="(min-width: 992px)">
<link rel = "stylesheet" href="./b.css" media="(min-width: 1200px)">

=> 实现一定程度上的响应式 => 可能会产生大量重复的css

3.实际使用

rem - 根据html的根字体大小动态变化的单位
media - 根据设备具体宽度动态设置css的工具

所以，一般情况下，使用rem + media => 全响应式的页面实现px宽度的自适应

面试题
假设设计稿是750px, 那么html中的font-size设置为多大合适呢？(rem如何设置合适的
比例能够还原设计稿)

    // 设计稿是750px => 屏幕分成15等份 => 每一份50px
    // 320px的设备中 每一份rem大小 320 / 15 = 21.33px
    // 640px的设备里 每一等份rem大小 640 / 15 = 52.67px
    
    //请问 ，当屏幕宽度 320px ~ 640px
    @media screen and (min-width: 320px){
        html {
            font-size: 21.33px;        
        }    
    }

追问：假设设计稿中有一个80px高度的div，那么css里真实的高度是多少？ *
div 高度 => rem 的值 => 结合屏幕宽度得到不同的px
假设屏幕宽度是320px ~ 640px :21.33 * 1.6 = 35.xxxxpx
屏幕宽度750px以上： 50 * 1.6 = 80px
如果设备像素比是2（比如iPhone的Retina屏幕），那么：
设计稿中的80px
CSS中应该写：80px / 2 = 40px
所以，如果您的设计稿中有一个80px高度的div，在CSS中的实际高度应该是：
在普通屏幕（设备像素比=1）上：80px
在高清屏幕（设备像素比=2）上：40px
在超高清屏幕（设备像素比=3）上：约27px
=> 自适应的单位，原则上可以做到不同屏幕尺寸与设计稿都可以还原 => 设计师不感知、开发做转换
=> 如何能够让设计师也能够感受到自适应逻辑的存在？

4.原子设计 + 栅格系统

将屏幕进行均分，以整体布局分块自适应 + 固定像素间距为框架做页面设计
=> 栅格设计 => 原子的size以及距离 => 原子结合media + rem

5.幻灯片

=> 一个综合而又较为全面的组件

<template>
    <div class="home">
        <div class="box" @mouseout="out" @mouseover="over">
            <img
                v-for="(item, index) in list"
                :key="index"
                v-show="listIndex == index"
                :src="item.url" alt="pic"
            >
            <p class="left" @click="changePage(prevIndex)">&lt;</p>
            <ul>
                <li
                    class="{color: listIndex == index}"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="changePage(index)"
                ></li>
            </ul>
            <p class="right" @click="changePage(nextIndex)">&gt;</p>
        </div>
    </div>
</template>
<script>
import imgList from '@/assets/imgList'
export default {
    name: 'OrderPage',
    data() {
        return {
            list: imgList,
            listIndex: 0,
            timer: null
        }
    },
    computed: {
        prevIndex() {
            return this.listIndex == 0 ? this.list.length - 1 : this.listIndex - 1
        },
        nextIndex() {
            return this.listIndex == this.list.length - 1 ? 0 : this.listIndex + 1
        }
    },
    methods: {
        changePage(index) {
            this.listIndex = index
        },
        out() { 
            this.setTimer();
        },
        over() {
            clearInterval(this.timer);
        },
        setTimer() {
            this.timer = setInterval(() => {
                this.listIndex ++;
                if (this.listIndex == this.list.length) {
                    this.listIndex = 0;
                }
            }, 2000)
        }
    },
    created() {
        this.setTimer();
    },
}
</script>
<style scoped>
    .home{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .box{
            width: 1000px;
            height: 500px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                z-index: 100;
            }
            p{
                cursor: pointer;
                color: #fff;
                font-size: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;
                height: 50px;
                background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 101;
            }
            .left{
                width: 80px;
                height: 80px;
                left: 0;
                margin-left: 20px;

            }
            .right{
                width: 80px;
                height: 80px;
                right: 0;
                margin-right: 20px;
            }
            ul{
                list-style: none;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                width: 200px;
                height: 20px;
                top: 90%;
                right: 35%;
                .color{
                    background-color: red;
                    color: red;
                }
                li{
                    cursor: pointer;
                    height: 10px;
                    width: 10px;
                    background-color: #fff;
                    border-radius: 50%;               
                }
            }
        }
    }
</style>

黄莆课程 webApp像素及屏幕rem适配及跑马灯代码实现