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

news2024/12/24 10:04:18

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.插件

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习MQ异步

1.MQ异步调用的优势 事件驱动模式: 优势: 总结: 2.初识MQ 核心概念以及结构: 常见的消息模型: 基本消息队列模型: 生产者代码: Testpublic void testSendMessage() throws IOException, Timeo…

图片尺寸在线修改怎么改?修改图片方法详解

图片尺寸在线修改怎么改?在数字化时代,图片尺寸的调整与修改已成为我们日常生活和工作中不可或缺的一部分。无论是为了满足特定平台的上传要求,还是为了提升图片的视觉效果,对图片尺寸进行在线修改都显得尤为重要。本文将详细介绍…

推荐系统学习记录——数据稀疏性衡量

在推荐系统中,数据稀疏性通常通过计算用户-物品交互矩阵的稀疏度来衡量。用户-物品交互矩阵是一个二维矩阵,其中行表示用户,列表示物品,矩阵中的每个元素表示用户对物品的交互情况(如评分、点击、购买等)&a…

专访云仓酒庄《综合品酒师》培训带领酒水行业专业与形象新篇章

在春意盎然的季节里,云仓酒庄成功举办了首届《综合品酒师》培训,吸引了业界的广泛关注。本次培训不仅为酒水行业注入了新的活力,更在提升行业专业性和形象方面迈出了坚实的步伐。我们有幸采访到了云仓酒庄的负责人,就此次培训的背…

使用DNSTOP进行DNS流量分析

一、前言 dnstop 是一个用于监听和解析 DNS 流量的实用工具。它可以帮助您监视网络中的 DNS 查询,并提供有关域名、IP 地址、查询类型等信息的实时统计。 当我们在分析DNS 服务器日志时,想去了解哪些用户在使用DNS 服务器,同时也希望对DNS …

完美提升Stable Diffusion生成质量和效率!UniFL:统一反馈学习框架(字节中山)

文章链接:https://arxiv.org/pdf/2404.05595 git链接:https://uni-fl.github.io/ 扩散模型已经彻底改变了图像生成领域,导致高质量模型和多样化的下游应用不断涌现。然而,尽管取得了重大进展,当前竞争性解决方案仍然存…

李廉洋;4.12现货黄金,美原油最新走势分析及策略。

现货黄金在美盘末将历史新高刷至2377美元/盎司。美国3月份PPI指数较上年同期上升2.1%,为11个月来的最高增幅,这份数据加之此前火爆的CPI指数,为美联储实现2%目标所面临的坎坷之路奠定了基础。不过,PPI报告中的细节让担心通胀再度加…

【Go语言快速上手(一)】 初识Go语言

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:Go语言专栏⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习更多Go语言知识   🔝🔝 Go快速上手 1. 前言2. Go语言简介(为…

spring Task 定时任务

导入maven坐标 spring-context&#xff08;已存在&#xff09; <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.3.34</version> <!-- 请根据需要选择合适的版本 -->…

考研数学|660对比真题的难度如何?有必要做比660再难的题吗?

660整体难度属于基础阶段到强化阶段。而且是选填部分的题目&#xff0c;所以还是要做一些其他题 然后说一下推荐的习题册&#xff1a;基础不好先做1800、强化之前660&#xff0c;强化可选880/1000题。 首先&#xff0c;传统习题册存在的一个问题是题量较大&#xff0c;但难度波…

每日两题 / 1.两数之和 49.字母异位词分组(LeetCode热题100)

1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 暴力解法&#xff1a; O ( N 2 ) O(N^2) O(N2)遍历数组&#xff0c;找两个数相加为target O ( N ) O(N) O(N)解法&#xff1a;将所有数排序&#xff0c;并记录这些数的下标&#xff0c;双指针从左右向中间走。指向的两数…

双调欧几里得旅行商问题的最优算法设计与实现

一、背景 双调欧几里得旅行商问题&#xff08;Double Bitonic TSP&#xff09;是欧几里得旅行商问题&#xff08;Euclidean TSP&#xff09;的一个特殊版本。在标准的欧几里得旅行商问题中&#xff0c;我们需要找到一条最短的路径&#xff0c;这条路径要求访问者从一个城市出发…

图像分类——综合车辆数据集

一、重要性及意义 智能交通管理&#xff1a;车辆图像分类是智能交通系统&#xff08;ITS&#xff09;中的关键组成部分。通过对监控摄像头捕捉到的车辆图像进行自动分类&#xff0c;系统能够实时识别车辆类型、颜色、品牌等信息&#xff0c;进而实现交通流量监控、违章行为检测…

neo4j使用详解(十八、java driver使用及性能优化<高级用法>——最全参考)

Neo4j系列导航&#xff1a; neo4j安装及简单实践 cypher语法基础 cypher插入语法 cypher插入语法 cypher查询语法 cypher通用语法 cypher函数语法 neo4j索引及调优 neo4j java Driver等更多 1.依赖引入 <dependency><groupId>org.neo4j.driver</groupId><…

【剪映专业版】06音频和图片格式

视频课程&#xff1a;B站有知公开课【剪映电脑版教程】 音频格式 最常见格式&#xff1a;MP3和WAV 转换工具&#xff1a;在线转换或者格式工厂&#xff08;免费&#xff0c;支持音频、视频、图片、文档等转换&#xff0c;好工具&#xff09; 图片格式

2024国内外常用药物研发数据库(收藏备用)

几十年前&#xff0c;医药研发领域数据查询可谓是一项繁琐而复杂的工作&#xff0c;研发人员需要耗费大量的时间和精力&#xff0c;穿梭于各类纸质文献、专业期刊和实验报告中&#xff0c;寻找各类宝贵数据。然而随着科技的发展&#xff0c;众多医药专业数据库如雨后春笋般涌现…

【随笔】Git 基础篇 -- 远程与本地提交的差异 git clone(二十六)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

结型场效应晶体管(JFET)是场效应管产品之一 市场发展空间良好

结型场效应晶体管&#xff08;JFET&#xff09;是场效应管产品之一 市场发展空间良好 结型场效应晶体管&#xff0c;简称结型场效应管&#xff0c;英文简称JFET&#xff0c;是一种具有放大功能的三端有源器件&#xff0c;可以分为N沟道、P沟道两种产品&#xff0c;工作原理是通…

CSS导读 (复合选择器 下)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 2.5 伪类选择器 2.6 链接伪类选择器 2.6.1 链接伪类注意事项 2.6.2 链接伪类选择器实际开发中的写法 2.7 …