Day05-移动适配

已于 2022-09-29 20:28:54 修改
阅读量107 收藏
点赞数 1
分类专栏： web移动端 文章标签： css html css3
于 2022-09-09 11:29:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45831040/article/details/126778231
版权

Day05-移动适配

一、长度单位

1.1 rem

目标：能够使用rem单位设置网页元素的尺寸
在这里插入图片描述
网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

px单位或百分比布局可以实现吗？
1.px单位是绝对单位
2.百分比布局特点宽度自适应，高度固定

适配方案
1.rem
2.vw / vh

rem单位：
1.相对单位
2.rem单位是相对于HTML标签的字号计算结果
3.1rem = 1HTML字号大小

<!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>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>

在这里插入图片描述

2.1 rem移动适配 - 媒体查询

目标：能够使用媒体查询设置差异化CSS样式
写法：
在这里插入图片描述
在这里插入图片描述

<!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>
        /* 使用媒体查询, 根据不同的视口宽度, 设置不同的跟字号 */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        }

        @media (width:320px) {
            html {
                font-size: 30px;
            }
        }
    </style>
</head>

<body>

</body>

</html>

3.1 rem布局方案

目标：能够使用rem单位设置网页元素的尺寸

设备宽度不同，HTML标签字号设置多少合适？
设备宽度大， 元素尺寸大
设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
在这里插入图片描述

<!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>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>

4.1 rem适配原理

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

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
rem单位的尺寸 = px单位数值 / 基准根字号

<!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>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>

5.1 flexible

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

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个

在这里插入图片描述
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

在这里插入图片描述

<!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>rem开发流程</title>
    <!-- <link rel="stylesheet" href="./demo.css"> -->
</head>
<body>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>

二、Less

1.1 目标：使用Less运算写法完成px单位到rem单位的转换

思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现。

在这里插入图片描述
在这里插入图片描述

2.1 目标：使用Less语法快速编译生成CSS代码

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

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

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

Easy Less : vscode插件
作用：less文件保存自动生成css文件

在这里插入图片描述
注释：
1.单行注释
语法：// 注释内容
快捷键：ctrl + /
2.块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

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

运算：
1.加、减、乘直接书写计算表达式
2.除法需要添加 小括号 或 .

注意：表达式存在多个单位以第一个单位为准

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.1 目标：能够使用Less嵌套写法生成后代选择器

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

语法：
在这里插入图片描述

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

在这里插入图片描述

5.1 目标：能够使用Less变量设置属性值

语法：
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6.1 目标：能够使用Less导入写法引用其他Less文件

导入: @import “文件路径”;
在这里插入图片描述
在这里插入图片描述

7.1 目标：使用Less语法导出CSS文件（改变css文件的位置）

方法一：配置EasyLess插件， 实现所有Less有相同的导出路径

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

在这里插入图片描述
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
加粗样式在这里插入图片描述

8.1 禁止导出

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

在这里插入图片描述

三、游乐园项目（代码未完全贴出）

index.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>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 主体内容 -->
    <div class="main">
        <!-- banner -->
        <div class="banner">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>

        <!-- 活动标题 -->
        <div class="title">
            <h4>乐园活动</h4>
        </div>

        <!-- 活动 -->
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
    </div>
    <!-- 主体内容 -->

    <!-- 底部工具栏 -->
    <footer>
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
    </footer>
    <!-- 底部工具栏 -->
    <script src="./js/flexible.js"></script>
</body>
</html>

index.less

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

// 变量:存储37.5
@rootSize:37.5rem;

body {
    background-color: #F0F0F0;
}

// 主体内容
.main {
    // padding-bottom: (50 / 37.5rem);
    padding-bottom: (50 / @rootSize);

    // banner
    .banner {
        height: (160 / @rootSize);
    }

    // 活动标题
    .title {
        height: (40 / @rootSize);
        line-height: (40 / @rootSize);
        padding-left: (15 / @rootSize);

        h4 {
            font-size: (14 / @rootSize);
            color: #3C3C3C;
        }
    }

    // 活动
    .item {
        margin-bottom: (10 / @rootSize);

        // 图
        .pic {
            position: relative;
            height: (160 / @rootSize);

            // 收藏图标
            i {
                position: absolute;
                top: (15 / @rootSize);
                right: (18 / @rootSize);
                font-size: (24 / @rootSize);
                color: #fff;
            }

            // 活动状态
            .active {
                position: absolute;
                left: (15 / @rootSize);
                top: (-4 / @rootSize);
                width: (68 / @rootSize);
                height: (29 / @rootSize);
                background-image: url(../images/status_active.png);
                background-size: contain;
                font-size: (12 / @rootSize);
                color: #fff;
                text-align: center;
                line-height: (25 / @rootSize);

                // 灰色图片样式
                // .active.off {} 交集选择器:必须是active类同时应用了off类
                &.off {
                    background-image: url(../images/status_default.png);
                }
            }

        }

        // 文字
        .txt {
            padding: (10 / @rootSize) (15 / @rootSize);
            background-color: #fff;

            .top {
                display: flex;
                justify-content: space-between;

                h5 {
                    width: (290 / @rootSize);
                    font-size: (15 / @rootSize);
                    color: #3C3C3C;
                    font-weight: normal;
                }

                p {
                    font-size: (15 / @rootSize);
                    color: #FE6243;
                }
            }

            .bottom {
                display: flex;
                margin-top: (10 / @rootSize);

                p {
                    margin-right: (15 / @rootSize);
                    font-size: (11 / @rootSize);
                    i {
                        font-size: (11 / @rootSize);
                    }
                    color: #B4B4B4;
                }
            }
        }
    }
}

// 底部工具栏
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    // height: (50 / 37.5rem);
    height: (50 / @rootSize);
    background-color: #FECA49;

    text-align: center;
    a {
        font-size: (11 / @rootSize);
        color: #D78B09;
        
        .iconfont {
            font-size: (24 / @rootSize);
        }

        &.current {
            color: #fff;
        }
    }
}
纯纯不会写代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
day05--monkey测试
wzhdxtx_的博客
01-13 82
Money介绍 顾名思义，Monkey就是猴子， Monkey测试，就像一只猴子， 在电脑面前，乱敲键盘在测试。 猴子什么都不懂， 只知道乱敲 通过Monkey程序模拟用户触摸屏幕、滑动Trackball、 按键等操作来对设备上的程序进行压力测试，检测程序多久的时间会发生异常 Monkey用来做什么 Monkey 主要用于Android的稳定性测试，自动的一个压力测试小工具， 主要目的就是为了测试app 是否会Crash（崩溃） Monkey程序介绍 （1） Monk
day05 移动适配：rem、less
weixin_43730921的博客
02-09 382
移动适配：rem、less
Day06-移动适配（vw/vh）
weixin_45831040的博客
09-10 185
目标：能够使用vw单位设置网页元素的尺寸相对单位：相对视口的尺寸计算结果 vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果 vw单位尺寸 1.确定设计稿对应的vw尺寸 （1/100视口宽度） 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )vh单位尺寸
前端web入门-移动web-day10-rem适配与less讲解
来自计科大一萌新的编程记录本
07-04 819
了解移动web基础，学会用rem适配移动端，了解less
day05-Monkey测试
weixin_60499943的博客
01-13 65
Money介绍： 顾名思义，Monkey就是猴子， Monkey测试，就像一只猴子， 在电脑面前，乱敲键盘在测试。 猴子什么 都不懂， 只知道乱敲 通过Monkey程序模拟用户触摸屏幕、滑动Trackball、 按键等操作来对设备上的程序进行压力测试，检测程 序多久的时间会发生异常 Monkey用来做什么： Monkey 主要用于Android的稳定性测试，自动的一个压力测试小工具， 主要目的就是为了测试app 是否会 Crash（崩溃） Monkey程序介绍 （1） Monkey程序由Andr
Day05-延迟队列精准发布文章
ltt159264的博客
07-20 897
定时任务：有固定周期的，有明确的触发时间延迟任务：没有固定的开始时间，它常常是由一个事件触发的，而在这个事件触发之后的一段时间内触发另一个事件，任务可以立即执行，也可以延迟。场景一：订单下单之后30分钟后，如果用户没有付款，则系统自动取消订单；如果期间下单成功，任务取消场景二：接口对接出现网络问题，1分钟后重试；如果失败，2分钟重试，直到出现阈值终止。
前端实训DAY-5——移动适配：less
HHppGo的博客
06-28 204
在文件中，可以书写css语法，文件保存后，自动生成对应的文件 css代码： -运算： css代码： -嵌套： css代码： -变量： css代码： -导入： css代码： -导出：
移动web day4 | 移动适配
csyldjy的博客
05-21 109
移动适配 目的: 屏幕宽度不同，网页元素尺寸不同（等比缩放）. 1 长度单位 1.1 rem 1em=1当前盒子文字大小 1rem=1html文字大小(16px) 1.1.2 媒体查询 1 目标：能够使用媒体查询设置差异化CSS样式 ( 随不同视口大小调整html字号 ) 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式 当某个条件成立, 执行对应的CSS样式 2 写法: 目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10 .
前端实训DAY-5——移动适配：rem
HHppGo的博客
06-28 525
移动适配：rem 单位换算成单位 css代码： flexible.js基本使用
day10-手机京东布局.rar
09-29
在本压缩包“day10-手机京东布局.rar”中，我们可以推测这是一份关于移动端京东应用程序界面设计和布局的教程或学习资料。虽然没有具体的标签来指导我们，但通过标题和包含的文件名，我们可以深入探讨一些与移动应用...
homework5-work-day-scheduler
03-16
9. **响应式设计**：使用`<meta name="viewport">`和媒体查询实现移动设备的适配，确保在不同屏幕尺寸下都能正常显示。 【HTML与JavaScript结合】： 1. **事件处理**：通过`addEventListener`或`onclick`等属性，...
song-day-android-dep:Song A Day AngularFirebase 应用程序的 Android 端口。 在开始本教程之前不应该这样做
07-17
【标题】"Song A Day Android端口：AngularFirebase应用程序的Android实现" 在移动应用开发领域，将Web应用程序移植到移动平台是一种常见的需求。本项目，"Song A Day Android Dep"，是一个AngularFirebase应用的...
Android-自定义时钟控件
08-13
在实际应用中，可能还需要考虑一些额外的功能，例如动画效果（如平滑地移动指针）或者设置不同的样式。此外，你可能需要根据设备的屏幕方向和尺寸进行适配，确保时钟在各种设备上都能正确显示。 在`ClockView-...
VR_GalleryApp：适用于GearVR和Daydream的虚拟现实画廊，可从托管在外部服务器上的json动态生成其内容（2d和360视频和图像）
02-06
对于开发者而言，该项目提供了关于VR应用开发、跨平台适配、动态内容加载以及C#在Unity中的应用等多个方面的重要参考。而对于艺术爱好者来说，VR_GalleryApp提供了一个全新的、不受地域限制的艺术探索平台。
网站基本布局CSS
m0_46608027的博客
07-24 808
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
最新发布
贵林之恋的博客
07-24 307
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
CSS 创建：从入门到精通
wjs2024的博客
07-24 387
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 304
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯不会写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值