CSS--移动web基础

比眉伴天荒 2024-03-22 17:34 42阅读 0赞

### 01-移动 Web 基础 ###

#### 谷歌模拟器 ####

模拟移动设备，方便查看页面效果

![在这里插入图片描述][c2d1cf8283584f41a420bc7ffc47f2cf.png]

#### 屏幕分辨率 ####

分类：

*  物理分辨率：硬件分辨率（出厂设置）
 *  逻辑分辨率：软件 / 驱动设置

结论：**制作网页参考 逻辑分辨率**

![在这里插入图片描述][82c434bb68d74fe09131a9d2ba6defe0.png]

#### 视口 ####

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸

<!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>
    </head>
    <body>
      
    </body>
    </html>

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

#### 二倍图 ####

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率屏幕下模糊失真

使用方法：

![在这里插入图片描述][bd32caf3fadc440ba194b62cc9b01478.png]

#### 适配方案 ####

*  宽度适配：宽度自适应
    
     *  百分比布局
     *  Flex 布局
 *  等比适配：宽高等比缩放
    
     *  rem
     *  vw

### 02-rem ###

#### 简介 ####

*  rem单位，是相对单位
 *  rem单位是相对于HTML标签的字号计算结果
 *  1rem = 1HTML字号大小

#### 媒体查询 ####

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

![在这里插入图片描述][7895c4470a994d4ab39cb1dd5a35a014.png]

@media (width:320px) {
        
      html {
        
        background-color: green;
      }
    }

#### rem 布局 ####

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。

![在这里插入图片描述][ef2d7ee1dd8e4ce3bc1919138ac5e472.png]

#### flexible.js ####

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

(function flexible (window, document) {
        
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
    
      // adjust body font size
      function setBodyFontSize () {
        
        if (document.body) {
        
          document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
        
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () {
        
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        
        if (e.persisted) {
        
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) {
        
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
        
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))

#### rem 移动适配 ####

rem单位尺寸

1.  确定基准根字号

*  查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

1.  rem单位的尺寸

*  **rem单位的尺寸 = px单位数值 / 基准根字号**

### 03-vw适配方案 ###

#### vw和vh基本使用 ####

vw和vh是相对单位，相对视口尺寸计算结果

*  vw：viewport width（1vw = 1/100视口宽度 ）
 *  vh：lviewport height ( 1vh = 1/100视口高度 )

#### vw布局 ####

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

#### vh问题 ####

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

### 04-less ###

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件

VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件

![在这里插入图片描述][07eff3b4762141c182075a399f8d74f4.png]

#### 注释 ####

*  单行注释
    
     *  语法：// 注释内容
     *  快捷键：ctrl + /
 *  块注释
    
     *  语法：/\* 注释内容 \*/
     *  快捷键： Shift + Alt + A

#### 运算 ####

*  加、减、乘直接书写计算表达式
 *  除法需要添加 小括号 或 .
 *  表达式存在多个单位以第一个单位为准

![在这里插入图片描述][0d77de8855af458dbd686601162a9685.png]

#### 嵌套 ####

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

![在这里插入图片描述][0a4e5d134c2d4e158454865ac3696e34.png]

提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

![在这里插入图片描述][0ab2885b935f42aa80c43a40d19e31f6.png]

#### 变量 ####

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

*  定义变量：@变量名: 数据;
 *  使用变量：CSS属性：@变量名;

// 定义变量
    @myColor: pink;
    // 使用变量
    .box {
      color: @myColor;
    }
    a {
      color: @myColor;
    }

#### 导入 ####

作用：导入 less 公共样式文件

语法：导入: @import “文件路径”;

提示：如果是 less 文件可以省略后缀

@import './base.less';
    @import './common';

#### 导出 ####

写法：在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

// out: ./index.css
    // out: ./css/

#### 禁止导出 ####

写法：在 less 文件第一行添加: // out: false

![在这里插入图片描述][9eae7e4d7191468ca0b5372a70c9bd50.png]

[c2d1cf8283584f41a420bc7ffc47f2cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/970f55140ef24d9ba02bd5e3395bbce1.png
[82c434bb68d74fe09131a9d2ba6defe0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d629566fbdb144279f550d62c513494a.png
[bd32caf3fadc440ba194b62cc9b01478.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a9c61101653e4564a109b2b760ed74c4.png
[7895c4470a994d4ab39cb1dd5a35a014.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0231132aab83480d913c68775d70fc0f.png
[ef2d7ee1dd8e4ce3bc1919138ac5e472.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/da9db00cfd7249f1881c56ec79e94092.png
[07eff3b4762141c182075a399f8d74f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e9fb0d154ec044fe8fa16149d7fea463.png
[0d77de8855af458dbd686601162a9685.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f3cbc3908b0c4a0d8f09f03e4098793c.png
[0a4e5d134c2d4e158454865ac3696e34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6236394f3eb245ef90cc374d2ea2a6b1.png
[0ab2885b935f42aa80c43a40d19e31f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0e5f9e192ba64f3cb91c7044875068f6.png
[9eae7e4d7191468ca0b5372a70c9bd50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fd7ae9d710be4c069145dfda8847ac1a.png