【HTML+CSS】移动端布局之rem布局

咕啾啾

已于 2022-05-01 15:40:02 修改

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： css html 前端 css3 html5

于 2022-05-01 15:35:26 首次发布

本文链接：https://blog.csdn.net/qq_30148319/article/details/124482986

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

学习视频及笔记来源：

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

一、rem基础

1、概念

rem是一个相对单位，类似em。
rem与em区别：em是相对于父元素字体大小而言的；rem是相对于html元素的字体大小而言的。
rem的优势：度元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小（可以根据具体屏幕的大小来适配不同的字体大小）。

2、语法

/* 根html 为 12px */
html {
    font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
    font-size: 2rem;
}

二、媒体查询

1、概念

@media 可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2、语法规范

用 @media 开头，注意@符号。
mediatype：媒体类型。
关键字：and not only。
media feature：媒体特性必须有小括号包含。

// 语法格式：
@media mediatype and|not|only (media feature) {
     CSS-Code;
}

//举例：
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}

2.1 mediatype 媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型。

2.2 关键字

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
only：指定某个特定的媒体类型，可以省略。
not：排除某个媒体类型，相当于“非”的意思，可以省略。

2.3 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含。

3、媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸。
媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

</html>

4、引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。

<!-- 语法规范 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<!-- 示例 -->
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

三、Less

1、概念

Less（Leaner Style Sheets）是一门 CSS 预处理语言，它扩展了CSS的动态特性。
Less 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写。
Less中文网址： http://lesscss.cn/ 。

2、Less 使用

新建一个后缀名为less的文件，在less文件里面书写less语句。

2.1 Less 变量

2.1.1 变量命名规范

必须有@为前缀。
不能以数字开头。
大小写敏感。
不能包含特殊字符。

// 规范：

@变量名:值;

// 示例：

@color: pink;

2.1.2 变量使用规范

//直接使用
body{
    color:@color;
}

2.1.3 Less编译

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
vocode Less 插件：

2.2 Less 嵌套

2.2.1 选择器嵌套

<!-- CSS选择器嵌套写法： -->

#header .logo {
    width: 300px;
}

// Less 嵌套写法：

#header {
    .logo {
        width: 300px;
    } 
}

2.2.2 交集、伪类、伪元素选择器

内层选择器的前面没有 & 符号，则它被解析为父选择器的后代。
如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

<!-- CSS选择器嵌套写法： -->

a:hover{
    color:red;
}

// Less 嵌套写法：

a{
    &:hover{
        color:red;
    }
}

2.3 Less 运算

/* Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}

/* 生成的css */
div {
    border: 15px solid red;
}

/* Less 甚至还可以这样 */
width: (@width + 5) * 2;

注意点：

（1）运算符中间左右有个空格隔开 1px + 5 。

（2）单位的选择：

① 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位。

②如果两个值之间只有一个值有单位，则运算结果就取该单位。

四、rem 实际开发适配方案

1、动态设置 html 标签 font-size 大小

假设设计稿是750px：

（1）把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）。

（2）每一份作为html字体大小，这里就是50px。

（3）在320px设备的时候，字体大小为320/15 就是 21.33px。

我的理解：

（1）假设有两个分辨率的屏幕，分别是750px和480px。

（2）现在先设定一个媒体查询，将整个屏幕划分为15份，则可得750px屏幕的font-size = 1rem = 750px / 15；480px屏幕的font-size = 1rem = 480px / 15。

（3）此时在750px设计稿中，假设有一个宽为100px的元素，则用rem单位表示则是 100px / ( 750 / 15 ) = 2rem。

（4）如何实现适配呢？在750px的设计稿中，100px通过计算为2rem，假设屏幕变为480px，此时比例值依旧相同，还是2，但是rem的单位发生了变化，rem此时根据（2）可得2rem = 2 * 32px = 64px。750 / 480 = 100 / 64 ，因此，实现了根据屏幕的等比例适配。

2、元素大小取值方法

公式：

（1）页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）。

（2）屏幕宽度/划分的份数就是 html font-size 的大小。

（3）页面元素的rem值 = 页面元素值（px） / html font-size 字体大小。

咕啾啾

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS】移动端布局之rem布局

学习视频及笔记来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili一、rem基础1、概念rem是一个相对单位，类似em。 rem与em区别：em是相对于父元素字体大小而言的；rem是相对于html元素的字体大小而言的。 rem的优势：度元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小（可以根据具体屏幕的大小来适配不同的字体大小）。2、语法/* 根html 为 12p
复制链接

扫一扫