MyDrowsiness
MyDrowsiness
文章22
标签0
分类0
回到首页
文章归档
我的朋友
关于周报

文章归档

最新文章

© 2024 MyDrowsiness Powered by Hexo & Nexmoe
Web笔记Day03

Web笔记Day03

2023年12月20日

一、移动适配

谷歌模拟器

谷歌浏览器自带的模拟器，可以模拟其他设备，使查看不同端的css效果更方便。（edge浏览器也有，就是“检查”右边的图标）

屏幕分辨率

  1. 屏幕分辨率：纵横向上的像素点数，单位是px。
  2. pc分辨率
    1920*1080
    1366*768
    ……
  3. 缩放150%
    1920/150%
    1080/150%
  4. 总结：
    硬件分辨率——物理分辨率（出厂设置）
    缩放调节的分辨率——逻辑分辨率（软件/驱动设置）

PS:网页的PC/移动端均参考逻辑分辨率。

视口

  1. 手机屏幕尺寸不同，网页宽度均为100%。

  2. 网页的宽度和逻辑分辨率尺寸相同。

  3. 视口：
    显示HTML网页的区域，用来约束HTML尺寸（vscode自动生成）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <!-视口标签：规定HTML的尺寸，让HTML的宽度=逻辑分辨率的宽度/设备的宽度-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Document</title>
    </head>

    width=device-width: 视口宽度=设备宽度
    initial-scale=1.0 缩放1倍（不缩放）

二倍图

  1. 概念：设计稿里面每个元素的尺寸倍数。
  2. 作用：防止图片在高分辨率屏幕下模糊失真。
  3. 现阶段设计稿参考IPhone6/7/8，设备宽度375px产出设计稿。
  4. 二倍图设计稿尺寸：750px。

使用设计稿：点击设计稿(显示宽750px)–>设计图2x / 像素密度@2x。

适配方案

  1. 宽度适配：宽度自适应。
    ▢ 百分比布局
    ▢ Flex布局
  2. 等比适配：宽高等比缩放。
    ▢ rem
    ▢ vw

二、rem

概念

  1. rem单位，是相对单位。
  2. rem单位是相对于HTML标签字号计算结果。
  3. 1rem = 1HTML字号大小。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /* 1. 给HTML标签加字号 */
    html{
        font-size: 30px;
    }
    /* 2. 使用rem单位书写尺寸 */
    .box{
        width: 5rem;  /* 30px*5 = 150px */
        height: 3rem;  /* 30px*3 = 90px */         				background-color: pink;
    }
</style>

思考

  1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

    答：媒体查询：
    媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。
    当某个条件成立，执行对应的CSS样式

    1
    2
    3
    4
    5
    @media (媒体特性){
        选择器{
            CSS属性
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        /* 视口宽度是375，网页背景色是绿色 */
        @media (width:375px){
            body{
                background-color: green;
            }
        }
    </style>

    PS: 当屏幕缩放比125% –> html宽375.2px @media不执行

  2. 设备宽度不同，HTML标签字号设置多少合适？

    答：设备宽度大，元素尺寸大。设备宽度小，元素尺寸小。
    目前rem布局方案中，将网页等待分成10份，HTML标签的字号为视口宽度的1/10。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>/*该方法繁琐难用*/
        *{
            margin: 0;
            padding: 0;
        }
        /* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
        @media (width:320px){
            html{
                font-size: 32px;
            }
        }
        @media (width:375px){
            html{
                font-size: 37.5px;
            }
        }
        @media (width:414px){
            html{
                font-size: 41.4px;
            }
        }
        /* 2. 使用rem单位书写尺寸 */
        .box{
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>

    rem-flexible.js
    flexible.js是手机淘宝开发出来的一个用于适配移动端的js库。
    核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

    1
    2
    3
    4
    <body>
        ......
        <script src="./js/flexible.js"></script>
    </body>

  3. 工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem?
    ——rem

  4. 如何确定rem的数值？
    目标：计算68px是多少个rem（设计稿适配375px视口）
    N*37.5=68 N=68/37.5
    rem单位尺寸：
    ▢ 确认基准根字号
    ► 查看设计稿宽度→确定参考设备宽度（视口宽度）→确定基准跟字号（1/10视口宽度）
    ▢ rem单位尺寸
    ► rem单位的尺寸=px单位数值 / 基准根字号

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    	/* 68*29 */
        div{
            width: 1.813rem;
            height: 0.773rem;
            background-color: pink;
        }
    </style>

三、less

简介

  1. less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。
  2. 浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
  3. VS Code插件：Easy LESS,保存less文件后==自动生成==对应的CSS文件。
1
2
3
4
5
6
7
.father{
    color: red;
    width: (68 / 37.5rem);//拥有计算能力
    .son{
        height: (29 / 37.5rem);//逻辑性更好
    }
}
1
2
3
4
5
6
7
.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  height: 0.77333333rem;
}

注释

  1. 单行注释(CSS不支持，生成CSS后不显示)
    ► 语法：//注释内容
    ► 快捷键：ctrl+/
  2. 块注释
    ► 语法：/*注释内容*/
    ► 快捷键：Shift+Alt+A

运算

加减乘直接书写计算表达式。
除法需要添加小括号或. （推荐使用小括号）

1
2
3
4
5
6
7
8
9
10
11
.box{
    width: 50 + 50px;
    width: 200 - 50px;
    width: 100 * 2px;
    
    //除法
    width: (68/37.5rem);
    height: 68./37.5rem;
    //如果表达式有多个单位，最终CSS里面以第一个单位为准
    height: (200px / 37.5rem);
}
1
2
3
4
5
6
7
8
.box {
  width: 100px;
  width: 150px;
  width: 200px;
  width: 1.81333333rem;
  height: 1.81333333rem;
  height: 5.33333333px;
}

嵌套

作用：快速生成后代选择器

1
2
3
4
5
6
.父级选择器{
    //父级样式
    .子级选择器{
        //子级样式
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father{
    color:red;
    .son{
        width: 200px;
        a{
            color: green;
            // & 表示的是当前选择器，代码写到谁的大括号里面就表示谁不会生成后代选择器
            //应用：配合hover伪类选择器或nth-child结构伪类选择器使用
            &:hover{
                color: blue;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
  color: red;
}
.father .son {
  width: 200px;
}
.father .son a {
  color: green;
}
.father .son a:hover {
  color: blue;
}

变量

概念：容器，存储数据。
作用：存储数据，方便使用和修改。
语法：
► 定义变量: @变量名 : 数据;
► 使用变量: CSS属性 : @变量名;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//1. 定义变量
//@myColor: pink; --> 书写与统一更改都很方便
@myColor: rgb(213, 114, 131);

//2. 使用变量
div{
    color: @myColor;
}
p{
    background-color: @myColor;
}
a{
    color: @myColor;
}
1
2
3
4
5
6
7
8
9
div {
  color: #d57283;
}
p {
  background-color: #d57283;
}
a {
  color: #d57283;
}

导入

作用：导入less公共样式文件。
语法：导入：@import “文件路径”;
提示：如果是less文件可以省略后缀。

防止不同less文件生成多个CSS文件，将其他less导入到index.less中

1
2
@import "./less变量.less";
@import "./less嵌套.less";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*@myColor: pink;*/
div {
  color: #d57283;
}
p {
  background-color: #d57283;
}
a {
  color: #d57283;
}
.father {
  color: red;
}
.father .son {
  width: 200px;
}
.father .son a {
  color: green;
}
.father .son a:hover {
  color: blue;
}

导出

写法：在less文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加/

1
2
3
4
5
// out: ./css/   

// out: ./index.css

// out: ./mycss/index.css

禁止导出

例如在前文需要导入到index.less的less文件就不需要导出自己（生成CSS）
写法：在less文件第一行添加：//out:false

1
// out:false

四、VW

概念

  1. 此为相对单位
  2. 相对视口尺寸计算结果
    vw: ==v==iewport ==w==idth
    ▢ 1vw=1%视口宽度
    vh: ==v==iewport ==h==eight
    ▢ 1vh=1%视口高度

vw布局

  1. 确定设计稿对应的vw尺寸（1/100视口宽度）
    ► 查看设计稿宽度 –> 确定参考设备宽度（视口宽度） –> 确定vw尺寸（1/100视口宽度）
  2. vw单位尺寸=想要的尺寸px / (1/100视口宽度)

vh单位问题

思考：开发中，能不能vw和vh混用呢？
► 不能
► vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

×