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

在这里插入图片描述

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

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

相关文章

完全免费、私有且本地运行的搜索聚合器FreeAskInternet原理解读

我们在百度搜索,会出现如下回答方式,如何实现的呢?让我们看看一个完全免费、私有且本地运行的搜索聚合器FreeAskInternet的实现原理吧。 一.功能介绍 FreeAskInternet 是一个完全免费、私有且本地运行的搜索聚合器,并使用 LLM 生成答案,无需 GPU。用户可以提出问题,系统…

自动化测试selenium(2)

目录 WebDriver介绍 WebDriver使用 使用WebDriver驱动操作浏览器(打开一个百度) WebDriver 相关API 定位元素 操作元素 上一篇主要介绍了自动化测试的概念以及selenium的基本原理, 这里我们来讲一下如何利用selenium来写测试用的脚本. WebDriver介绍 Selenium是一个用于…

JMM(Java Memory Model java内存模型

目标: 搞清楚高并发场景下,java内存模型是怎么支持的,对象在内存中是怎么布局的? 目录 目标: 搞清楚高并发场景下,java内存模型是怎么支持的,对象在内存中是怎么布局的? 1.硬件层…

若依 ruoyi-vue el-select 多选框 全选 反选 全不选 查询功能

参考文章vueel-select下拉实现&#xff1a;全选、反选、清空功能 如图&#xff0c;优化代码&#xff0c;支持若依字典 import multipleSelect from /components/MultipleSelect/index.vuecomponents: { multipleSelect },<el-row><el-form-item label"分管领域…

ERA5再分析资料下载和处理成红黑图教程

ERA5再分析资料下载和处理教程 1.下载官网&#xff1a; https://cds.climate.copernicus.eu/cdsapp#!/dataset/reanalysis-era5-pressure-levels?tabform 下载之前需要注册网站的账号认证 选择需要的要素时间气压等要素&#xff0c;注意最后下载的数据格式是grib还是nc格式 …

Unity之PUN实现多人联机射击游戏的优化(Section 3)

目录 &#x1f4a3;一、准备工作 &#x1f4a3;二、生成弹头脚本的编写 &#x1f4a3;三、实现发射和伤害同步 手雷都加了在给狗剩加个火箭筒不过分吧。效果看GIF动图&#xff0c;分别是单机和联机的效果。 添加火箭筒依旧是在原有的基础上更改&#xff0c;我查看火箭筒模型…

8.基础乐理-纯八度

一个音听上去是高还是低&#xff0c;是由音的振动频率决定的&#xff0c;也就是每一秒多少 Hz 所决定的&#xff0c;Hz数越小音听上去就越低&#xff0c;Hz数越大音听上去就越大&#xff0c;钢琴从左到右&#xff0c;Hz数 在逐渐增大&#xff0c;当两个音的振动频率数越接近简单…

ARM汇编指令、指令中s后缀的作用、N、Z、C、V位有什么作用、ARM汇编启动代码

ARM汇编指令 学习arm汇编的主要目的是为了编写arm启动代码,启动代码启动以后,引导程序到c语言环境下允许。换句话说启动代码的目的是为了在处理器复位以后搭建c语言最基本的需求。因此启动代码的主要任务有: 初始化异常向量表; 初始化各工作模式的栈指针寄存器; 开启arm…

【深入解析spring cloud gateway】13 Reactive Feign的使用

问题引入 在gateway中如果使用feignClient的话&#xff0c;会报如下错误 java.lang.IllegalStateException: block()/blockFirst()/blockLast() are blocking, which is not supported in thread reactor-http-nio-3at reactor.core.publisher.BlockingSingleSubscriber.bloc…

密码知识汇总

文章目录 密码学知识&#xff23;&#xff29;&#xff21;三要素机密性&#xff08;Confidentiality&#xff09;完整性&#xff08;Integrity&#xff09;可用性&#xff08;Availability&#xff09; 非安全信道的风险以及应对措施风险应对措施使用加密技术&#xff08;防窃…

在uni-app使用iconfont中的图标

uni-app 如何使用iconfont中的图标 在uni-app中使用Iconfont图标通常涉及以下几个步骤&#xff1a; 步骤一&#xff1a;获取Iconfont资源 访问 iconfont-阿里巴巴矢量图标库&#xff0c;注册并登录账号。 浏览或搜索所需的图标&#xff0c;将它们添加至购物车或直接创建项目进…

Ubuntu 23.10.1 nginx源码安装

注&#xff1a;以下所有命令均在root管理员模式下&#xff0c;若不是&#xff0c;请在所有命令前加sudo 1、安装依赖库 1.1、安装gcc g的依赖库 apt-get install build-essential apt-get install libtool1.2、安装pcre依赖库 apt-get update apt-get install libpcre3 lib…

【opencv】示例-ffilldemo 使用floodFill()函数进行区域泛洪填充

image mask mask #include "opencv2/imgproc.hpp" // 包含OpenCV图像处理头文件 #include "opencv2/imgcodecs.hpp" // 包含OpenCV图像编码头文件 #include "opencv2/videoio.hpp" // 包含OpenCV视频IO头文件 #include "opencv2/highgui.hp…

【分享】3种方法取消Word文档的“打开密码”

我们知道&#xff0c;Word文档可以设置“打开密码”&#xff0c;防止文档被随意打开&#xff0c;那后续不需要密码保护了&#xff0c;要怎么取消呢&#xff1f;不小心把密码忘记了还可以取消吗&#xff1f;不清楚的小伙伴一起来看看吧&#xff01; 如果是Word文档不再需要密码…

Open3D(C++) 0~1归一化到0~255

目录 一、算法原理二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 0-1归一化到0~255的计算原理如下: g ′ = 255 ∗

冯喜运:4.15汇市观潮:现货黄金美原油技术分析

【 黄金消息面分析】&#xff1a;周一(4月15日)亚市盘初&#xff0c;金价开盘跳涨13美元&#xff0c;报2357.71美元/盎司&#xff0c;随后延续涨势&#xff0c;最高触及2372.45美元/盎司&#xff0c;目前金价回落至2354.19美元/盎司&#xff0c;如果中东局势未进一步恶化&#…

通过注解实现接口入参检查

valid 通过注解实现接口入参检查 前言一、引入依赖二、使用步骤1.创建入参对象 request2.提供一个接口 controller3.全局异常捕获 GlobalExceptionHandler4.执行结果 总结 前言 作为一个后端开发&#xff0c;一般是不单独对接口参数的每个入参进行长度、最大值、最小值判断。 …

RN向上向下滑动组件封装(带有渐变色)

这段组件代码逻辑是出事有一个View和下面的块,下面的块也就是红色区域可以按住向上向下滑动,当滑动到屏幕最上面则停止滑动,再向上滑动的过程中,上方的View的背景色也会有个渐变效果,大概逻辑就是这样 代码如下 import React, {useEffect, useRef, useState} from react; impo…

爱自然生命力专项基金:“爱·启航”残障家庭教育援助项目帮扶上万残障家庭

为进一步积极践行社会责任&#xff0c;助力公益慈善事业&#xff0c;2017年2月爱自然生命力体系与中国下一代教育基金会开展相关合作&#xff0c;共同启动了中国下一代教育基金会爱自然生命力专项基金&#xff0c;并启动了基金第一个项目“爱启航残障家庭教育援助项目”&#x…

华为昇腾AI芯片加持,9.1k Star 的 Open-Sora-Plan,国产Sora要来了吗

Aitrainee | 公众号&#xff1a;AI进修生 哇&#xff0c;今天Github趋势榜第一啊&#xff0c;为了重现Sora&#xff0c;北大这个Open-Sora-Plan&#xff0c;希望通过开源社区力量的复现Sora&#xff0c;目前已支持国产AI芯片(华为昇腾&#xff09;&#xff0c;这回不用被卡脖子…