Web进阶：Day5 移动适配、rem、less

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

Web进阶Day5

Date: January 10, 2023
Summary: 移动适配、rem、less

移动适配

移动适配指网页元素的宽高都要随着设备宽度等比缩放

Untitled

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

vw / vh未来的解决方案

rem

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

网页效果

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

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

px单位是绝对单位

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

适配方案

rem

vw / vh

rem单位

相对单位

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

1rem = 1HTML字号大小

rem移动适配

思考

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

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

媒体查询

目标能够使用媒体查询设置差异化CSS样式

思考

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

采用媒体查询

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

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

写法

Untitled

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

思考

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

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

设备宽度大 元素尺寸大

设备宽度小元素尺寸小

Untitled

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

Untitled

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

思考

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

如何确定rem的数值

Untitled

rem适配原理

rem单位尺寸

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

  2. 书写代码尺寸是rem单位

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

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

2.2 rem单位的尺寸

N * 37.5 = 68 → N = 68 / 37.5

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

flexible.js

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

思考咱们检测了3个视口分别设置了根字号有什么弊端吗

答手机设备多屏幕尺寸不一视口不仅仅有这3个

Untitled

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

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

Untitled

less

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

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

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

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

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

概念

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

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

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

Easy Less :

vscode插件

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

Untitled

语法

注释

单行注释

语法// 注释内容

快捷键ctrl + /

块注释

语法/* 注释内容 */

快捷键 ctrl + shift + /

注意less只能把多行注释渲染到css中去

Untitled

运算

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

除法需要添加 小括号 或 .

多用小括号用.会报警告

注意

  1. 表达式存在多个单位以第一个单位为准
  2. less4.0版本之前除法不用小括号或者.

案例

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

    height: 29 / 37.5rem;

}

嵌套

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

思考书写CSS选择器时 如何避免样式冲突

.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}
.father:hover {
  color: orange;
}

嵌套

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

语法

Untitled

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

Untitled

案例

.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

// .father:hover {}

变量:

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

思考

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

方法一逐一修改属性值太繁琐

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

变量

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

语法

定义变量@变量名: 值;

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

案例

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

导入/出文件

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

思考

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

CSS书写link标签

Less导入

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

案例

@import './01-体验less.less';
@import './02-注释';

Untitled

目标使用Less语法导出CSS文件

思考

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

Untitled

方法一

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

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

Untitled

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

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

// out: ./qqq/daqiu.css

// out: ./abc/

禁止导出

思考所有的Less文件都需要导出CSS文件吗

Untitled

答我们可以通过import导入其他less文件

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

// out: false

项目演练

目标实现在不同宽度设备中等比缩放的网页效果

Untitled

准备工作项目目录及文件

根目录paradise / FC

Untitled

整体布局网页为灰色背景色

主体内容

底部间距高度与工具栏相同

底部工具栏

固定定位

尺寸

背景色

注意需要设置基准根字号 @rootSize: 37.5

  • Code:

    base.less

    // out:false
@charset 'UTF-8';

* {
  // -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, ul, p, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

    index.less

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

// 变量: 存储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 {
            height: (160 / @rootSize);
        }

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

// 底部工具栏
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    // height: (50 / 37.5rem);
    height: (50 / @rootSize);
    background-color: #FECA49;
}

    normalize.less

    // out:false
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */
@charset 'UTF-8';

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

    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>
            </div>
            <div class="txt">1</div>
        </section>
    </div>
    <!-- 主体内容 -->

    <!-- 底部工具栏 -->
    <footer>2</footer>
    <!-- 底部工具栏 -->
    <script src="./js/flexible.js"></script>
</body>
</html>

学在苦中求艺在勤中练

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：C++——map|set介绍

下一篇：jsp新代码第443课

“Web进阶：Day5 移动适配、rem、less” 的相关文章

rust当中返回一个trait的问题记录1年前 (2023-02-02)
稳定支撑千万级月活，华为日历背后的英雄1年前 (2023-02-02)
微信小程序｜使用小程序制作一个节日祝福生成器1年前 (2023-02-02)
单向链表1年前 (2023-02-02)
数电实验 数字电子钟设计 基于quartus 实现计时校时闹钟秒表稍复杂音频 分享电路图设计以及工程文件1年前 (2023-02-02)
学习ASP.NET Core Blazor编程系列二十二——登录（1）1年前 (2023-02-02)
windows2003 的安装以及安装时遇到的问题1年前 (2023-02-02)
三十一岁只是一种新的二十一岁1年前 (2023-02-02)
学习ASP.NET Core Blazor编程系列二十三——登录（2） 1年前 (2023-02-02)
【论文导读】- SpreadGNN: Serverless Multi-task Federated Learning for Graph Neural Networks（去服务器的多任务图联邦学习）1年前 (2023-02-02)

阿里云国际版