网易严选官网项目-笔记

kkw-15919880007 
1、移动端系统包括：
// Ios、android、windows phone、black berry
2、移动端的浏览器
// safari、chrome、firefox
3、屏幕尺寸：
1、像素
设备像素 pt(物理像素/尺寸、分辨率)、
css像素px(视觉像素/尺寸)

2、屏幕尺寸 （对角线指的是xxx英寸）

// 通常iphone6 1334x750指代的是屏幕宽高的发光点数 
3、PPI，像素密度

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

图片分辨率想要高清显示，必须符合一个格子一个坑，如果图片尺寸相同，在不同分辨率下显示的大小会不一样。在高分辨率屏幕下会进行缩放。如果把图片在高分辨率屏幕下刻意放大到同等大小。势必造成图像失真或模糊。

4、像素比(DPR)
移动端适配详解：https://blog.csdn.net/a419419/article/details/79295799

一、移动端适配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>
 

 移动端样式重置

body *{
    -webkit-user-select: none;    /* 禁止ios和android用户选中文字 */
    -webkit-touch-callout: none;    /* 禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片 */
    -webkit-text-size-adjust: 100%;    /* 禁止横竖屏旋转后文字放大 */

    /* 取自网易严选的默认字体 */
    font-family: PingFangSC-Light,helvetica,Heiti SC;    
}
a,button,input{
    -webkit-tap-highlight-color: rgba(0,0,0,0);    /* 去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景 */
}
button,input{
    -webkit-appearance: none;    /* ios下button与input都会有个默认背景 */
    border-radius: 0;    /* ios下input有个默认圆角 */
}

/* 根节点下定义一个变量 */
:root{
    --c1:#dd1a21;
}
body{
    margin: 0;
    font-size: 12px;
    background-color: #eee;
    color: #333;
}
a {
    text-decoration: none;
    color: #333;
}
input {
    outline: none;
    vertical-align: middle;
    padding: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    vertical-align: middle;
}
h1,h2,h3,h4,p{
    margin: 0;
}
html{
    font-size: 13.333333333333334vw;
}

/* 使用字体图标 */
@font-face {
    font-family: \'iconfont\';
    src: url(\'../fonts/iconfont.eot\');
    src: url(\'../fonts/iconfont.eot?#iefix\') format(\'embedded-opentype\'),
        url(\'../fonts/iconfont.woff2\') format(\'woff2\'),
        url(\'../fonts/iconfont.woff\') format(\'woff\'),
        url(\'../fonts/iconfont.ttf\') format(\'truetype\'),
        url(\'../fonts/iconfont.svg#iconfont\') format(\'svg\');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

css中可以声明变量，例如：

// 根节点下定义一个变量 
:root {
    --c1: #dd1a21;
}

// 语法：属性明：var(变量名)；
// 全局使用：如下
.head button {
    font-size: 0.24rem;
    color: var(--c1);
    border: 1px solid var(--c1);
}

关于图片的适配srcset

<div class="wrap">
　　<a href="#"><img src="images/banner_01.png" srcset="images/banner_01.png 2x, images/banner_01@3x.png 3x"></a>
　　<a href="#"><img src="images/banner_02.png"></a>
</div>

// 当图片宽度为100vw时，在不同机型上达到了适配

 关于背景图片的适配-webkit-image-set

// css中的样式设置为：
.img {
    width: 2.58rem;
    height: 2.58rem;
    margin: 0 auto;
    background-image: url(../images/img_01@1x.png);
    background-image: -webkit-image-set(url(../images/img_01@1x.png) 2x, url(../images/img_01@2x.png) 3x);
    background-size: cover;
}

// 在不同机型上达到了适配

 关于图片复合属性描述：

.newPeople .right a:nth-child(1) {
    background: #fbe2d3 url(../images/img_02.png) no-repeat right bottom/2rem 2rem;  // 等同于background-position/background-size,书写的时候用/来进行区分，否则无法识别
}

关于相对定位的使用：

// 元素相对于自己本身位置移动
.hot>div a span {
    font-size: 0.28rem;
    margin-left: 0.25rem;
    position: relative;
    top: -0.16rem;
}

关于h1～h6标签的使用。h1(一般用于logo)，逐次递减

// 页面logo通常给h1 一般只用一次
// 页面主标题h2
// 每一个板块的标题h3
// ...

关于真机演示。

// 1、打开vs code,扩展商店搜索liver server。安装liver server

  // 2、打开项目文件，右键 Open with Live Server 打开项目

 

   // 3、找到自己电脑IP地址，用自己电脑ip代替打开的项目地址IP

   　　// 例如，通过live server 打开的项目链接为：http://127.0.0.1:5500/index.html

　　　　// 用自己电脑的IP替换127.0.0.1为：http://192.168.80.63:5500/index.html，并生成二维码

　　// 4、确保自己电脑跟手机同个Wi-Fi下。用手机扫描二维码即可查看

弹性盒模型：display:flex;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 200px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 设置父容器为弹性盒 会使每一个子元素自动变成伸缩项*/
            display: flex;
        }

        .first {
            width: 200px;
            height: 100%;
            background-color: red;
        }

        .second {
            width: 200px;
            height: 100%;
            background-color: green;
        }

        .third {
            width: 200px;
            height: 100%;
            background-color: blue;
        }

        .fourth {
            width: 200px;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <div class="fourth"></div>
    </div>
</body>
</html>

// 起始样式
// 设置父盒子为弹性盒之后的样式

属性1:justify-content: flex-start; (默认值)

 .box {
      width: 1000px;
      height: 200px;
      border: 1px solid red;
      box-sizing: border-box;
      /* 设置父容器为弹性盒 */
      display: flex;
      justify-content: flex-start;
 }
// 让子元素从起始位置开始排列
 .box {
       width: 1000px;
       height: 200px;
       border: 1px solid red;
       box-sizing: border-box;
       /* 设置父容器为弹性盒 */
       display: flex;
       justify-content: flex-end;
} 
// 让子元素从结束位置开始排列
.box {
       width: 1000px;
       height: 200px;
       border: 1px solid red;
       box-sizing: border-box;
       /* 设置父容器为弹性盒 */
       display: flex;
       justify-content: center;
} 
// 让子元素从中间位置开始排列
.box {
     width: 1000px;
     height: 200px;
     border: 1px solid red;
     box-sizing: border-box;
     /* 设置父容器为弹性盒 */
     display: flex;
     justify-content: space-evenly;
 }
// 将子元素从中间位置开始排列，剩余的空间平均分布
.box {
     width: 1000px;
     height: 200px;
     border: 1px solid red;
     box-sizing: border-box;
     /* 设置父容器为弹性盒 */
     display: flex;
     justify-content: space-around;
 }
// 将多余的空间平分在每一个子元素的两边
.box {
     width: 1000px;
     height: 200px;
     border: 1px solid red;
     box-sizing: border-box;
     /* 设置父容器为弹性盒 */
     display: flex;
     justify-content: space-between;
 }
// 将子元素从两端对齐开始排列，剩余的空间平均分布

属性2:flex-flow  (flex-wrap 换行 于flex-direction 设置排列的主轴方向（默认水平）)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 设置父容器为弹性盒 */
            display: flex;
            justify-content: space-between;
            flex-wrap: no-wrap; // 默认值,不换行子元素会收缩
        }

        .first {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .third {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .fourth {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .fifth {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <div class="fourth"></div>
        <div class="fifth"></div>
    </div>
</body>
</html>

// 如上，倘若子元素宽度大于父元素宽度时，子元素会进行收缩变成179.6px，而非换行
 
.box {
   　　width: 900px;
      height: 600px;
      border: 1px solid red;
      box-sizing: border-box;
      /* 设置父容器为弹性盒 */
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;  // 换行
}

.box {
       width: 900px;
       height: 600px;
       border: 1px solid red;
       box-sizing: border-box;
      /* 设置父容器为弹性盒 */
     display: flex;
     justify-content: space-between;
      /* 垂直排列没有换行 */
     flex-direction: column;   // 默认值：row（行)水平方向
 }
.box {
       width: 900px;
       height: 600px;
       border: 1px solid red;
       box-sizing: border-box;
      /* 设置父容器为弹性盒 */
     display: flex;
     justify-content: space-between;
      /* 垂直排列换行 */
     flex-direction: column;  
     flex-wrap = wrap;
 }

属性3:flex (flex-grow 和flex-shrink和flex-basis的简写），注意：写在子元素身上

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 设置父容器为弹性盒 */
            display: flex;
            justify-content: space-around;
        }

        .first {
            width: 200px;
            height: 200px;
            background-color: red;
            /* flex-grow可以用来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值。 比例值的计算方式：当前空间的flex-grow值/所有子元素的flex-grow值的和，默认值为0，说明子元素并不会去占据剩余的空间 */
            flex-grow: 1;
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: green;
　　　　　　　flex-grow: 0;
        }

        .third {
            width: 200px;
            height: 200px;
            background-color: blue;
　　　　　　　flex-grow:0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
    </div>
</body>

</html>
// 倘若将第一个盒子的flex-grow设置为1，剩余空间由第一个子元素全部占据： 1/1+0+0 =1 
// 倘若将第二个盒子的flex-grow也设置为1，那么剩余空降被第一第二个盒子平分占据 ： 1/1+1+0 = 1/2 
// 依此类推,倘若将第三个盒子的flex-grow也设置为1，那么剩余空间将被三个盒子平分占据：1/1+1+1 = 1/3

属性4:flex-shrink  (可以来扩展子元素的宽度)，注意：同样写在子元素身上

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px; // 将父盒子宽度变为500，小于所有子盒子的总宽度
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 设置父容器为弹性盒 */
            display: flex;
            justify-content: space-around;
        }

        .first {
            width: 200px;
            height: 200px;
            background-color: red;
             /* flex-thrink定义收缩比例，通过设置的值来计算收缩空间。比例值的计算方式：当前空间的flex-shrink值/所有子元素的flex-thrink值的和，默认值为1，说明子元素并不会去承担不够的空间 */
            flex-shrink: 1;
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: green;
            flex-shrink: 1;
        }

        .third {
            width: 200px;
            height: 200px;
            background-color: blue;
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
    </div>
</body>

</html>
// 倘若将第一个盒子的flex-thrink值设置为1，其他盒子设置为0,因此。不够的空间将由第一个盒子全部承担

实际开发中运用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid red;
            box-sizing: border-box;
            /* 设置父容器为弹性盒 */
            display: flex；
        }

        .first {
            background-color: #ccc;
            flex: 2;
        }

        .second {
            background-color:#fff;
            flex: 6;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first"></div>
        <div class="second"></div>
    </div>
</body>

</html>

原生js添加class属性

document.getElementsByTagName(\'body\')[0].className = \'snow-container\'; //设置为新的
document.getElementsByTagName(\'body\')[0].className += \'snow-container\'; //在原来的后面加这个
document.getElementsByTagName(\'body\')[0].classList.add("snow-container"); //与第一个等价

注意：在pc端，元素嵌套的规则：行内不套块级。移动端可以不用遵循（因为移动端没有鼠标，点击区域需要较大。为了提升用户体验）。

 

 

 

 
 
 





            

            
        

	    
	    
    


 
                    
            
                

                  
 
        

	 
        

            

                                
分类：
 
                                                                
技术点：

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode