首页 > 其他分享> > 网易严选官网项目-笔记

网易严选官网项目-笔记

2021-05-26 17:34:15 作者：互联网

1、移动端系统包括：

// Ios、android、windows phone、black berry

2、移动端的浏览器

// safari、chrome、firefox

3、屏幕尺寸：

1、像素
设备像素 pt(物理像素/尺寸、分辨率)、
css像素px(视觉像素/尺寸)

2、屏幕尺寸 （对角线指的是xxx英寸）
3、PPI，像素密度

// 同一区域，发光点越多，屏幕分辨率越高越清晰

4、像素比(DPR)

// 通常iphone6 1334x750指代的是屏幕宽高的发光点数

一、移动端适配vw/vh + rem

// div在大屏下大一点，在小屏里小一些
// vw+rem就能做到你说的
// vw         把屏幕（用户的手机）宽度分成100份，天生就是用来做适配
// rem        html的font-size值，这个东西能当作尺寸来用
// 通过vw设置一个html的font-size，然后页面里所有的元素需要使用尺寸就都用rem
// font-size:?vw;
// 150px用vw来表示，是多少？
// 150/(750/100)=20vw
// 求font-size的vw值
// width: ?rem;
// width: 1.5rem;    为什么要给一个1.5rem，是为了你从设计搞里量出一个值后直接除100结果就是rem的值，是为了方便计算！！！！！！！！！
// 1.5rem => 20vw    1.5*?rem=20vw => ?=20vw/1.5 => 13.333333333333334vw

来看代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <style>
            html {
                 /* 元素的实际宽度 = 根节点中fontsize的大小 * rem */
                font-size: 20px;
            }

            body {
                margin: 0;
            }

            div {
                width: 1.5rem;
                height: 2rem;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
<html>

通过上面代码来计算1个rem宽度等于多少vm宽度？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <style>
            html {
                /* 元素的实际宽度 = 根节点中fontsize的大小 * rem */
                font-size: 13.333333333333334vw;
            }

            body {
                margin: 0;
            }

            div {
                /* 假设 iphone6设计稿中某个元素宽为150px,高为200px。如何计算单位尺寸？ */
                /* 设计稿宽度 750px (750占了100个vw,可以得出1个vw占了7.5px) 
                    元素宽度 150px (150px除以7.5px = 20vw)
                    弊端：换算起来比较麻烦
                    
                    优化：
                    设计稿宽度 750px, 转换成rem为：750px/100 = 7.5rem 
                    元素尺寸为150px, 换算成rem为：150px/100 = 1.5rem 
                    综上可得：7.5rem等于100vw，1.5rem等于20vw
                    求1个rem的宽度为多少vw？
                    100vw/7.5rem = 13.333333vw 
                    20vw/1.5rem = 13.333333vw
                */
                width: 1.5rem;
                height: 2rem;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
<html>

标签：1.5,网易,font,严选,rem,像素,vw,官网,20vw
来源： https://www.cnblogs.com/kkw-15919880007/p/14814335.html