9月1日-9月3日（移动web开发——rem适配布局、苏宁易购移动端首页制作）

最新推荐文章于 2022-12-06 19:06:56 发布

今天一定要早睡

最新推荐文章于 2022-12-06 19:06:56 发布

阅读量372

点赞数

分类专栏：前端笔记文章标签：前端 css3 html5 less

本文链接：https://blog.csdn.net/qq_44659171/article/details/126636546

版权

本文介绍了移动Web开发中rem单位的使用，媒体查询的原理与案例，以及Less预处理器的基础知识。重点讲解了rem适配方案，包括动态设置html字体大小和元素大小计算方法，并通过实际案例——苏宁易购移动端首页的制作，展示了rem布局的实际应用。

摘要由CSDN通过智能技术生成

2.4 案例2——媒体查询+rem实现元素动态大小变化

4.1 rem 适配方案技术使用（市场主流）

1）设计稿常见尺寸宽度编辑

2）动态设置 html 标签 font-size 大小

5）新建index.less文件，并把common.less引入到index.less中

6）body样式写在index.less里

一、 rem单位

em是相对于父元素的字体大小来说的。如其父元素的字体大小为12px，子元素的宽度为10em，那么子元素的宽度就是12*10 px;

但rem是相对于html元素的字体大小来说的，算法与em同理。

rem单位的优势：

整个页面只有一个html，通过设置调整html里面的文字大小，就可以修改页面所有盒子（元素）的宽度和高度（盒子用rem单位）。

当html里的文字大小变化时，页面所有的元素都会跟着变化，并且是等比例变化的，从而达到了整体的控制。

rem和em的应用：

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            font-size: 14px;
        }
        
        div {
            font-size: 12px;
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 呈现出来的盒子大小为：14*10=140px宽，14*10=140px高 */
        }
        
        p {
            width: 10em;
            height: 10em;
            background-color: purple;
            /* 呈现出来的盒子大小为：12*10=120px宽，12*10=120px高 */
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

</body>

</html>

效果：

二、媒体查询

Media Query 是CSS3的新语法。

2.1 价值：

可以针对不同的屏幕尺寸设置不同的样式。

2.2 语法规范：

@media 媒体类型关键字 (媒体特性) { 样式； }

代码：

   <style>
        /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 然后设置我们想要的样式 */
        /* max-width: 800px， 意思是小于等于800px */
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
    </style>

2.3 案例1——根据页面宽度改变背景色

媒体查询一般按照从小到大 or 从大到小的顺序来。

注意：媒体特性里的单位不可以省略，数值是包含了=的。

代码：

<style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. screen 还有 and 必须带上 不能省略 */
        /* 3. 我们的数字后面必须跟单位  970px   这个 px 不能省略 */

        /* 第一档：小于540px 页面背景颜色变为 浅蓝色 */   
        @media screen and (max-width: 539px) {
            body {
                background-color: lightblue;
            }
        }
        /* 第二档：540 ~ 970 页面背景颜色变为 浅绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        /* 第二档的简易写法：（代码的层叠性） */
        @media screen and (min-width: 540px) {
            body {
                background-color: lightgreen;
            }
        }

        /*第三档：大于等于970 页面背景颜色变为 粉红色色 */   
        @media screen and (min-width: 970px) {
            body {
                background-color: pink;
            }
        }
    </style>

效果：

代码的层叠性：

2.4 案例2——媒体查询+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>媒体查询 + rem : 实现元素动态变化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 从小到大的顺序 */
        @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: lightgreen;
            color: #fff;
            /* 垂直水平居中 */
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

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

</html>

效果：