前端基础进阶5

前端基础进阶

移动适配

  • 移动适配

    • rem ： 目前多数企业在用的解决方案

    • vw / vh：未来的解决方案

  • rem移动适配

    • 使用rem单位设置网页元素的尺寸

    • 长度单位

      • 网页效果

        • 屏幕宽度不同，网页元素尺寸不同（等比缩放）

      • px单位或百分比布局可以实现吗？

        • px单位是绝对单位

        • 百分比布局特点宽度自适应，高度固定

      • rem单位

        • 相对单位

        • rem单位是相对于HTML标签的字号（根字号）计算结果

        • 1rem = 1HTML字号大小

      • rem移动适配 - 媒体查询

        • 够使用媒体查询设置差异化CSS样式

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

          • 媒体查询

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

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

      • 写法


    <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>rem基本使用title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            /* 1rem = 1html标签字号大小 */
            html {
                font-size: 20px;
            }
            
            .box {
                width: 5rem;
                height: 3rem;
                background-color: pink;
            }
        style>
    head>
    ?
    <body>
        <div class="box">div>
    body>
    ?
    html>

    • 思考

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

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

        • 设备宽度大， 元素尺寸大

        • 设备宽度小，元素尺寸小

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


    <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>rem适配title>
        <style>
    ?
            * {
                margin: 0;
                padding: 0;
            }
            
            /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
            @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>
    head>
    ?
    <body>
        <div class="box">div>
    body>
    ?
    html>

  • rem适配原理

    • 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

    • rem单位尺寸

      • 1、根据视口宽度，设置不同的HTML标签字号

      • 2、书写代码，尺寸是rem单位

        • 确定设计稿对应的设备的HTML标签字号

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

        • rem单位的尺寸

          • * 37.5 = 68 → N = 68 / 37.5

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

  • flexible

    • 使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

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

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

Less

  • Less语法

    • 使用Less运算写法完成px单位到rem单位的转换

    • 在px单位转换到rem单位过程中，哪项工作是最麻烦的？

      • 除法运算。CSS不支持计算写法。

      • 解决方案：可以通过Less实现。

  • Less

    • Less是一个CSS预处理器, Less文件后缀是.less

    • 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

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

  • 编译插件

    • Easy Less :

      • vscode插件

      • 作用：less文件保存自动生成css文件

  • Less语法

    • 注释：

      • 单行注释

        • 语法：// 注释内容

        • 快捷键：ctrl + /

      • 块注释

        • 语法：/* 注释内容 */

        • 快捷键： shift + alt + A

    • 运算：

      • 加、减、乘直接书写计算表达式

      • 除法需要添加 小括号（推荐） 或 .

      • 注意：

        • 表达式存在多个单位以第一个单位为准

       

    • 嵌套：

    • 使用Less嵌套写法生成后代选择器

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

      • 语法：

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

    • 变量

      • 使用Less变量设置属性值

      • 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

        • 方法一：逐一修改属性值（太繁琐）

        • 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

          • 变量：存储数据，方便使用和修改。

          • 语法：

            • 定义变量：@变量名: 值;

            • 使用变量：CSS属性：@变量名;

    • 能够使用Less导入写法引用其他Less文件

      • 思考

        • 开发网站时，网页如何引入公共样式？

          • CSS：书写link标签

          • Less：导入

            • 导入: @import “文件路径”;

    • 使用Less语法导出CSS文件

      • 思考：

        • 目前，Less文件导出的CSS文件位置是哪里？

        • 方法一：

          • 配置EasyLess插件， 实现所有Less有相同的导出路径

            • 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

        • 方法二：控制当前Less文件导出路径

          • Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

    • 所有的Less文件都需要导出CSS文件吗？否

    • 禁止导出

      • 在less文件第一行添加: // out: false

         

移动web

相关

移动web_平面转换

标签