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,一经查实,立即删除!

相关文章

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

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

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

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

spring boot 集成rocketMq + 基本使用

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

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

一、ETL的主要作用 ETL(Extract, Transform, Load)是数据仓库中的关键环节,其主要作用是将数据从源系统中抽取出来,经过转换和清洗后加载到数据仓库中。具体而言: Extract(抽取):从…

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安装成功后,可以使用以…

WS2812B彩灯

目录 1、介绍 2、参数 3、引脚功能 4、应用电路 5、Code 1、介绍 WS2812是一种智能控制LED灯源,集成了控制电路和RGB芯片在一个5050封装组件中。它的主要特点和技术规格如下: 集成设计:WS2812将控制电路和RGB芯片集成在同一个封装中&…

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

一、AI 讲解 数据库模式分为三个层次:外模式、概念模式和内模式。这三个层次分别对应不同的抽象级别,帮助数据库管理员和用户以不同的视角理解数据库结构。 外模式(用户级):是数据库用户的视图。每个用户可以通过外模…

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

介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。 效果图预览 使用说明 点击“Start Download“按钮后,Native侧启动子线程模拟下载任务Native侧启动子线程模拟下载,并通过Arkts的回调函数将进度信息实时传递到Arkts侧 实…

神经网络背后的数学原理

原文地址:The Math Behind Neural Networks 2024 年 3 月 29 日 深入研究现代人工智能的支柱——神经网络,了解其数学原理,从头开始实现它,并探索其应用。 神经网络是人工智能 (AI) 的核心,为…

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

🧑 作者简介:阿里巴巴嵌入式技术专家,深耕嵌入式人工智能领域,具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍:分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

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

本节目录 一、等效基带谱 二、抽取概念 三、低通信号的整数倍抽取 四、数字带通信号的抽取 1、整带抽取 2、带通信号的正交复抽取 3、带通信号的正交实抽取本节内容 一、等效基带谱 对于任何采样频率为fs的实采样信号,无论是Nyquist采样还是带通采样,采…

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

PlayEdu:打造私有化的企业智慧教育平台,赋能全员高效成长!- 精选真开源,释放新价值。 概览 随着企业不断发展及市场竞争加剧,内部培训的重要性日益凸显。然而,在实施过程中,如何确保培训内容与…

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

目录 前言 一、Tablelayout (一)Tablelayout的相关简介 (二)TableLayout使用方法 1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行,不留空白) 2.多个组件占据一行,则配合TableRow实现…

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

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

java数据结构与算法刷题-----LeetCode461. 汉明距离

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 异或统计1的个数2. 位移操作处理3. Brian Kernighan算法 位运…

机器学习和深度学习--李宏毅(笔记与个人理解)Day11-12

Day11 when gradient is small…… 怎么知道是局部小 还是鞍点? using Math 这里巧妙的说明了hessan矩阵可以决定一个二次函数的凹凸性 也就是 θ \theta θ 是min 还是max,最后那个有些有些 哈 是一个saddle; 然后这里只要看hessan矩阵是不…

图形学基础:二维三维刚体的移动、缩放和旋转矩阵

一、二维 1.1 缩放矩阵 x,y分别表示在x轴,y轴缩放的倍数 示例: 1.2 平移矩阵 x,y分表表示在x轴,y轴上移动的距离 示例: 1.3 旋转矩阵 θ 表示点绕原点逆时针旋转θ 示例: 点 (2,1) 绕原点旋转…

MapReduce过程解析

一、Map过程解析 Read阶段:MapTask通过用户编写的RecordReader,从输入的InputSplit中解析出一个个key/value。Map阶段:将解析出的key/value交给用户编写的Map()函数处理,并产生一系列的key/value。Collect阶段:在用户编…

从 SQLite 3.5.9 迁移到 3.6.0(二十一)

返回:SQLite—系列文章目录 上一篇:从 SQLite 3.4.2 迁移到 3.5.0(二十) 下一篇:SQLite—系列文章目录 ​SQLite 版本 3.6.0 (2008-07-16) 包含许多更改。按照惯例 SQLite项目&#xff…

怎么在外地控制自家的电视

怎么在外地控制自家的电视 随着科技的进步和智能家居的普及,远程控制家中的电器设备已经成为现实。电视作为家庭娱乐的中心,远程控制功能更是备受关注。那么,如何在外地控制自家的电视呢?本文将为你提供详细的步骤和有价值的信息…