less+rem适配+媒体查询布局(主流)

rem适配布局

  • 一.rem基础
  • 二.媒体查询
    • 1.概念
    • 2.语法
      • （1）.mediatype查询类型
      • （2）.关键字
      • （3）.媒体特性
      • （4）.应用
    • 3.媒体查询+rem实现元素动态大小变化
    • 4.引入资源（针对不同媒体查询用不同的css)
  • 三.less基础
    • 1.css弊端
    • 2.less介绍（css扩展语言）
    • 3.less的使用
      • （1）less变量
      • （2）less编译（编译后用link引入）
      • （3）less嵌套
      • （4）less运算（+-*/）
  • 四.rem适配方案
    • 1.概念
    • 2.方案
    • 3.方案1
    • 4.方案1总结

一.rem基础

在这里插入图片描述

二.媒体查询

1.概念

在这里插入图片描述

2.语法

在这里插入图片描述

（1）.mediatype查询类型

在这里插入图片描述

（2）.关键字

在这里插入图片描述

（3）.媒体特性

在这里插入图片描述

（4）.应用

在这里插入图片描述

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

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

4.引入资源（针对不同媒体查询用不同的css)

在这里插入图片描述
在这里插入图片描述
style640.css
在这里插入图片描述
style.320css
在这里插入图片描述

三.less基础

1.css弊端

在这里插入图片描述

2.less介绍（css扩展语言）

在这里插入图片描述

3.less的使用

（1）less变量

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

（2）less编译（编译后用link引入）

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

（3）less嵌套

子类

在这里插入图片描述
自身/伪类
在这里插入图片描述

在这里插入图片描述

（4）less运算（±*/）

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

四.rem适配方案

1.概念

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

2.方案

在这里插入图片描述

3.方案1

一般以750为准
在这里插入图片描述
在这里插入图片描述

4.方案1总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/809305.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言如何初始化指针？

C语言如何初始化指针？

一、问题 如何初始化指针？只有初始化的指针才可以使⽤，这个与普通变量没有区别。 二、解答 定义指针变量之后，必须为其赋具体的值，⽽且指针变量的赋值只能赋予地址，绝对不可以是其他数据，并且要注意数据类…
阅读更多...
JSONP是跨域资源共享的古老技术吗

JSONP是跨域资源共享的古老技术吗

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
JSON（JavaScript Object Notation）

JSON（JavaScript Object Notation）

目录 是什么 为什么会设计json 数据结构 数据类型 字符串（String） 数字（Number） 对象（Object） 数组（Array） 布尔值（Boolean） null 基本结构 对象…
阅读更多...
前端和后端解决跨域问题的方法

前端和后端解决跨域问题的方法

目前很多java web开发都是采用前后端分离框架进行开发，相比于单体项目容易产生跨域问题。 一、跨域问题CORS 1.什么是跨域问题？ 后端接收到请求并返回结果了，浏览器把这个响应拦截了。 2.跨域问题是怎么产生的？ 浏览器基于同源…
阅读更多...
spring boot 集成rocketMq + 基本使用

spring boot 集成rocketMq + 基本使用

1. RocketMq基本概念 1. NameServer 每个NameServer结点之间是相互独立，彼此没有任何信息交互 启动NameServer。NameServer启动后监听端口，等待Broker、Producer、Consumer连接， 相当于一个路由控制中心。主要是用来保存topic路由信息&#…
阅读更多...
C语言的顺序表详解

C语言的顺序表详解

一.顺序表概念和结构 1.顺序表的概念 顺序表是一种线性表的存储结构，它通过一段连续的存储空间来存储表中的元素，元素之间的顺序由它们在存储空间中的物理位置决定。顺序表可以使用数组来实现，也称为数组顺序表。 2.顺序表的结构 顺序表的…
阅读更多...
ETL中如何运用好MQ消息集成

ETL中如何运用好MQ消息集成

一、ETL的主要作用 ETL（Extract, Transform, Load）是数据仓库中的关键环节，其主要作用是将数据从源系统中抽取出来，经过转换和清洗后加载到数据仓库中。具体而言： Extract（抽取）：从…
阅读更多...
Ubuntu 安装Java、Git、maven、Jenkins等持续集成环境

Ubuntu 安装Java、Git、maven、Jenkins等持续集成环境

Ubuntu 持续集成 安装OpenJdk 查看所有可安装的 JDK 版本 apt list OpenJDK\*使用 apt 安装 JDK（以 11为例）,最好是用11，java8对应的jenkins会有兼容问题。 sudo apt install openjdk-11-jdk openjdk-11-jre安装成功后，可以使用以…
阅读更多...
机器学习_XGBoost模型_用C++推理示例Demo

机器学习_XGBoost模型_用C++推理示例Demo

1. 需求 将 python 训练好的 xgboost 模型, 使用C 进行加载并进行推理(预测) 2. 代码实现 #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <string> #include <xgboost/c_api.h>const char *m…
阅读更多...
WS2812B彩灯

WS2812B彩灯

目录 1、介绍 2、参数 3、引脚功能 4、应用电路 5、Code 1、介绍 WS2812是一种智能控制LED灯源&#xff0c;集成了控制电路和RGB芯片在一个5050封装组件中。它的主要特点和技术规格如下&#xff1a; 集成设计&#xff1a;WS2812将控制电路和RGB芯片集成在同一个封装中&…
阅读更多...
软考高级架构师：数据库模式概念和例题

软考高级架构师：数据库模式概念和例题

一、AI 讲解 数据库模式分为三个层次&#xff1a;外模式、概念模式和内模式。这三个层次分别对应不同的抽象级别&#xff0c;帮助数据库管理员和用户以不同的视角理解数据库结构。 外模式&#xff08;用户级&#xff09;&#xff1a;是数据库用户的视图。每个用户可以通过外模…
阅读更多...
HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。 效果图预览 使用说明 点击“Start Download“按钮后&#xff0c;Native侧启动子线程模拟下载任务Native侧启动子线程模拟下载&#xff0c;并通过Arkts的回调函数将进度信息实时传递到Arkts侧 实…
阅读更多...
下采样-高斯金字塔

下采样-高斯金字塔

高斯金字塔是一种图像金字塔的构建方法&#xff0c;用于实现图像的下采样。它通过对原始图像进行重复的高斯滤波和下采样操作&#xff0c;以获得不同分辨率的图像。下面通过图文并茂的方式详细描述高斯金字塔的构建过程。 1. 原始图像 2. 应用高斯滤波&#xff1a;首先&#…
阅读更多...
CentOS7编译ZLMediaKit并使能WebRTC

CentOS7编译ZLMediaKit并使能WebRTC

使能WebRTC需要libsrtp库, libsrtp库需要openssl, 所以第一步先安装openssl, 系统自带的版本是1.0.2的, libsrtp需要1.1.1以上版本, 需要使用源码进行编译; GCC准备 需要安装gcc7以上版本, 并切换到gcc7的编译环境 yum install centos-release-scl yum install devtoolset-7…
阅读更多...
神经网络背后的数学原理

神经网络背后的数学原理

原文地址&#xff1a;The Math Behind Neural Networks 2024 年 3 月 29 日 深入研究现代人工智能的支柱——神经网络&#xff0c;了解其数学原理&#xff0c;从头开始实现它&#xff0c;并探索其应用。 神经网络是人工智能 &#xff08;AI&#xff09; 的核心&#xff0c;为…
阅读更多...
智能网络新纪元：机器学习赋能未来计算机网络高速发展

智能网络新纪元：机器学习赋能未来计算机网络高速发展

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…
阅读更多...
软件无线电系列——多率信号处理之抽取

软件无线电系列——多率信号处理之抽取

本节目录 一、等效基带谱 二、抽取概念 三、低通信号的整数倍抽取 四、数字带通信号的抽取 1、整带抽取 2、带通信号的正交复抽取 3、带通信号的正交实抽取本节内容 一、等效基带谱 对于任何采样频率为fs的实采样信号&#xff0c;无论是Nyquist采样还是带通采样&#xff0c;采…
阅读更多...
企业培训系统私有化解决方案：PlayEdu

企业培训系统私有化解决方案：PlayEdu

PlayEdu&#xff1a;打造私有化的企业智慧教育平台&#xff0c;赋能全员高效成长&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 随着企业不断发展及市场竞争加剧&#xff0c;内部培训的重要性日益凸显。然而&#xff0c;在实施过程中&#xff0c;如何确保培训内容与…
阅读更多...
Android Studio开发学习（六）———TableLayout(表格布局)、FrameLayout(帧布局)

Android Studio开发学习（六）———TableLayout(表格布局)、FrameLayout(帧布局)

目录 前言 一、Tablelayout &#xff08;一&#xff09;Tablelayout的相关简介 &#xff08;二&#xff09;TableLayout使用方法 1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行&#xff0c;不留空白) 2.多个组件占据一行&#xff0c;则配合TableRow实现…
阅读更多...
【论文阅读笔记】Head-Free Lightweight Semantic Segmentation with Linear Transformer

【论文阅读笔记】Head-Free Lightweight Semantic Segmentation with Linear Transformer

莫名地这篇论文我特别难理解&#xff0c;配合代码也食用不了 1.论文介绍 Head-Free Lightweight Semantic Segmentation with Linear Transformer 基于线性Transformer的无头轻量级语义分割 2023年 AAAI Paper Code 2.摘要 现有的语义分割工作主要集中在设计有效的解码器&am…
阅读更多...
最新文章

Copyright @ 2022~2023