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.方案
  • 六.方案一
    • .方案1总结
  • 七.方案2(js)
    • 1.简介
    • 2.引入js
    • 3.插件

一.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.方案

在这里插入图片描述

六.方案一

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

.方案1总结

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

七.方案2(js)

需要一个插件cssrem,把px转化为rem.
需要一个js代码并用script引入.

1.简介

在这里插入图片描述

2.引入js

在这里插入图片描述

3.插件

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【系统分析师】需求工程☆

文章目录 0、需求工程概述1、需求的分类2、需求获取3、需求分析3.1 结构化需求分析-SA3.1.1DFD- 数据流图3.1.2 STD-状态转换图3.1.3 ER图-实体联系图 3.2 面向对象需求分析-OOA3.2.1 工具-UML图3.2.2 UML分类3.2.3 用例图 ☆3.2.4 类图 / 对象图 ☆3.2.5 顺序图3.2.6 活动图3.…

斐尔玫瑰荣获《中国3.15诚信企业》证书,诚信经营赢得社会认可

2024年,斐尔玫瑰,荣获了备受瞩目的《中国3.15诚信企业》证书。这一荣誉的获得,不仅是对斐尔玫瑰长期以来坚持诚信经营、提供优质产品和服务的肯定,更是对其在消费者心目中建立起的良好信誉和口碑的认可。 斐尔玫瑰作为女性私密护…

自动化测试之httprunner框架hook函数实操

本篇介绍httprunner中hook函数的使用,以及通过编程能力实现建设自动化测试更全面的场景覆盖 前置: 互联网时代让我们更快的学习到什么是Httprunner 正文: 经过上文了解到这个框架怎么使用之后,我们开始来探讨一下我们为什么要用…

MySQL分区表(14/16)

分区表 基本概述 分区表是数据库中一种用于优化大型表数据管理和查询性能的技术。它将一个表的数据根据特定的规则或条件分割成多个部分,每个部分称为一个分区。每个分区可以独立于其他分区进行存储、管理和查询,这样可以提高数据处理的效率&#xff0…

mybatis(9)-逆向工程+PageHelper+注解方式开发

最后一篇!! 1、逆向工程1.1、普通版1.2、增强版 2、PageHelper2.1 limit2.2 插件 3、注解开发3.1 Insert3.2Delete3.3 Update3.4 Select Results 1、逆向工程 1.1、普通版 所谓的逆向工程是:根据数据库表逆向生成Java的pojo类,S…

智过网:注册安全工程师注册有效期与周期解析

在职业领域,各种专业资格认证不仅是对从业者专业能力的认可,也是保障行业安全、规范发展的重要手段。其中,注册安全工程师证书在安全生产领域具有举足轻重的地位。那么,注册安全工程师的注册有效期是多久呢?又是几年一…

伺服系统中滤波器算法的工程实现方案

此文章主要致力于描述如何将伺服驱动系统中的数字滤波器用编程语言来实现。

【动态规划 区间dp 位运算】100259. 划分数组得到最小的值之和

本文涉及知识点 动态规划 区间dp 位运算 LeetCode100259. 划分数组得到最小的值之和 给你两个数组 nums 和 andValues,长度分别为 n 和 m。 数组的 值 等于该数组的 最后一个 元素。 你需要将 nums 划分为 m 个 不相交的连续 子数组,对于第 ith 个子数…

银行渠道整合平台应用架构

渠道整合平台将 功能微服务化,将服务流程标准化。微服务 化的功能能够进行各种组合使用。而标准化的流程可同时作用于所有渠道,保证体验一致。未来在进行流程变更的时候可有效避免各渠道的重复开发。 • 渠道整合平台避免了各个渠道对于同一个业务的差异…

C# dynamic 数据类型

在C#中,dynamic是一种数据类型,它允许在运行时推迟类型检查和绑定。使用dynamic类型,可以编写更具灵活性的代码,因为它允许在编译时不指定变量的类型,而是在运行时根据实际情况进行解析。 dynamic类型的变量可以存储任…

你真的会处理python代码异常吗?

Python 使用称为异常(exception)的特殊对象来管理程序执行期间发生的错误。每当发生让Python不知所措的错误时,它都会创建一个异常对象。如果你编写了处理该异常的代码,程序将继续运行;如果你未对异常进行处理,程序将停…

什么是面向对象思想?

面向对象不是一种技术,而是一种思想。它指导我们以什么形式组织代码,以什么思路解决问题。 面向对象编程,是一种通过对象方式,把现实世界映射到计算机世界的编程方法。 面向对象解决问题的思路:把构成问题的事物分解成…

响应式导航栏不会做?看我一分钟学会制作导航栏!

引言 随着互联网技术的飞速发展,用户体验在网页设计中的重要性日益凸显。其中,导航栏作为网页的“指南针”,不仅能帮助用户快速定位所需内容,还能体现网站的整体风格和设计理念。本文将介绍如何使用HTML、CSS和JavaScript制作一个…

1.16 LeetCode总结(基本算法)动态规划2

70. 爬楼梯 首先想到的是递归: // 递归 int climbStairs(int n) {if (n 1) {return 1;} else if (n 2) {return 2;}return climbStairs(n - 1) climbStairs(n - 2); }我们先来看看这个递归的时间复杂度吧: 递归时间复杂度 解决一个子问题时间*子问…

【翻译】再见, Clean Code!

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 【翻译】再见, Clean Code!正文那是一个深夜次日早晨这只是一个阶段 【翻译】再见…

【植物大战僵尸融合机器学习】+源码

上期回顾: 今天给大家推荐一个Gtihub开源项目:PythonPlantsVsZombies,翻译成中就是植物大战僵尸。 《植物大战僵尸》是一款极富策略性的小游戏。可怕的僵尸即将入侵,每种僵尸都有不同的特点,例如铁桶僵尸拥有极强的抗…

【设计模式学习】单例模式和工厂模式

꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如需转…

Java-博客系统(前后端交互)

目录 前言 博客系统基本情况 1 创建项目,引入依赖 2 数据库设计 2.1 分析 2.2 建库建表 3 封装数据库 3.1 在java目录下创建DBUtil类,通过这个类对数据库进行封装 3.2 在java目录下创建实体类(博客类Blog) 3.2 在java目录下创建…

vwmare+Ubuntu20.04安装超级保姆级完整教程

强烈建议先完整的看完一遍教程在进行安装以免出现问题!!! 如果遇到error:建议复制error后面的信息然后到浏览器搜索,查找解决方案,其次在进行某个不确定的操作时,建议先保存快照,这样…

uboot操作指令1

文章目录 前言一、信息查询命令1.bdinfo用于查看板子的信息2.printenv 打印环境变量3.version查看uboot版本 二、环境变量操作命令1.setenv修改环境变量2.setenv新建环境变量3.setenv删除环境变量 三、内存操作命令1.md 命令2.nm命令3.mm命令4.mw命令 四、网络操作命令1.ping命…