移动适配rem，less语法

已于 2022-08-03 10:56:44 修改
阅读量532 收藏 1
点赞数
文章标签： css3 前端
于 2022-08-03 10:10:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45190677/article/details/126133667
版权
本文介绍了rem作为移动适配单位的概念，通过媒体查询和flexible.js实现不同屏幕尺寸下的等比缩放。此外，详细讲解了Less预处理器的用法，包括计算、导入导出、嵌套和变量，以简化CSS编写并提高效率。
摘要由CSDN通过智能技术生成

目录

一、rem是什么？

1.rem单位

2.rem移动适配-媒体查询

3.flexible

三、less语法

1.less计算

2.less导入、导出

3.less嵌套

4.less变量

一、rem是什么？

它的全称是 font size of the root element (根元素的字体大小)，根节点（html）的font-size决定了rem的尺寸，即它是一个相对单位，相对于 (html)。

二、屏幕宽度不同，网页元素尺寸不同（等比缩放）

1.rem单位

由于px单位是绝对单位、百分比布局特点宽度自适应，高度固定，无法实现等比缩放。所以咱们可选适配方案有rem、vw/vh。
rem是相对单位
1）、rem单位是相对于 HTML标签的字号 计算结果
2）、 1rem = 1HTML字号大小

2.rem移动适配-媒体查询

1）、手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？ 
媒体查询 能够 检测视口的宽度
最低0.47元/天 解锁文章
鹿鹿odd
关注
移动端之Less基础
yexiangCSDN的专栏
05-11 204
一、移动端之Less基础 1. CSS 弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的 （比如什么div，p，li 等都设置同一个颜色背景色之类，重复很多相同代码，并且做不到统一修改） 不方便维护及扩展，不利于复用 CSS 没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目 2. Less 介绍 Less （Leaner .
移动适配rem方法—媒体查询—flexible.js框架—Less语法—实例模拟
小琳爱分享的博客
07-28 540
移动适配rem方法—媒体查询—flexible.js框架—Less语法—实例模拟
移动端less 基础
HIRAETHZY的博客
11-18 728
Less中文网址：http://lesscss.cn/ 常见的CSS预处理器：Sass、Less、Stylus 1.Less安装： ①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/ ②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可 ③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可 ④检查是否安装成功，使用cmd命令“ lessc -
移动端常见布局-Less
qq_41670147的博客
11-07 537
维护css的弊端 css是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念 ● css需要书写大量看似没有逻辑的代码，css冗余度比较高 ● 不方便维护及拓展，不利于复用 ● css没有很好的计算能力 Less介绍 Less是一门css扩展语言，也称为CSS预处理器 作为CSS的一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序语言的特性 在CSS的语法基...
less ,移动端less常见问题处理
01-31
less ,移动端less常见问题处理less ,移动端less常见问题处理less ,移动端less常见问题处理
用less使页面随着屏幕放大缩小并用媒体查询
qq_57540936的博客
11-17 622
1.首先使less的使用方法： 先准备以下文件： 从这里去下载less.jsLess 中文网 也可以cdn引入 2.在页面中引入less，需要标注 ： rel="stylesheet/less"，js引入需要放在 link 后面，如下图： 3.在less文件中写样式，如下图： @rpx: 10rem; @media (min-aspect-ratio: 1920/1080) { html { font-size: calc(1000vh / 1080); ...
day05 移动适配：rem、less
weixin_43730921的博客
02-09 432
移动适配：rem、less
移动web适配（rem）、less的使用
weixin_72297531的博客
07-23 326
移动web适配（rem）、less的使用
移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
phoebemeng的博客
07-21 525
移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
移动基础笔记
qq_64353584的博客
03-25 1177
em em:就是一种长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号 rem rem是css3新增的一种长度单位，它是参照根元素(html)的字号 获取宽度 获取宽度的方法的说明： * width():它只能得到当前元素的内容的宽度 * innerWidth():它能获取当前元素的内容的宽度+padding * outerWidth():获取当前元素的内容的宽度+padding+border 移动事件 console.log(e.touches); c
如何在JavaScript中获取屏幕，窗口和网页大小
qq_43327962的博客
12-05 2189
浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。 屏幕 屏幕尺寸 屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存屏幕尺寸信息的对象。 screen.width：屏幕的宽。 screen.height：屏幕的高。 可用屏幕尺寸 可用的屏幕大小由活动屏幕的宽度和高度组成，没有操作系统工具栏。 screen.availWidth：可利用的宽，等于屏幕的宽。 screen.availH
rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
最新发布
u013773608的博客
11-14 1939
css3 新语法。
媒体查询(rem)配合less使用
vGuYi的博客
05-16 1112
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 百分比布局特点宽度自适应，高度固定 Flex布局更多的解决了盒子的排列方式，高度很难适配 所以都不能实现 需要配合 rem 单位 设置元素的尺寸（宽度/高度） 最终适配 那么什么是rem了? rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 rem的使用场景： 我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放 媒体查询 设置差异化CSS样式 ..
CSS 使用calc()获取当前可视屏幕高度
weixin_30657541的博客
07-03 746
来自：https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em ==...
使用less自动进行移动端rem适配计算
zjsfdx的博客
02-21 6206
在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。 目录结构如下： 某宝rem适配文件flexible.js 看起来还不错，1rem=37.5px（苹果6下） // JavaScri...
less计算宽高正确写法
weixin_41848005的博客
08-11 3764
在less中正确使用calc
移动端适配方案(rem和vw vh适配)(css预处理器-less)
ck1216801274的博客
07-24 2732
我们的需求的是要做移动端适配页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）方案如下我们移动端采取flex布局。rem单位做移动端适配的。rem相对单位，跟html文字大小有关系vw/vh单位做移动端适配的vw/vh也是相对单位,跟视口宽度和高度有关系媒体查询检测屏幕的视口宽度可以根据屏幕的宽度自动修改html文字大小lessless让我们的css具有了计算能力-less可以让我们很方便的把px转换为remhttps。...
less整理
杨园园的博客
05-29 439
less的几种形式 1 默认的参数 2.根据div的层次写less 3函数 @switch *4.做全局变量设置 5. @import ‘a.less’ 引入的方式也分种类 最常见的案例是media的大小屏幕适配 ...
less对高宽的计算
热门推荐
peaceoncemore的专栏
03-21 1万+
  学习心得：    在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如    height: calc(100% - 30px);在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：    height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用    min-he...
Vue移动端适配：rem与vw策略详解
在处理Vue移动端适配问题时，我们需要理解并掌握两种关键的单位——rem和vw。首先，了解基础知识： 1. **rem** 是相对于根元素（`html`元素）字体大小的单位。它使得布局可以根据设备的视口大小自适应调整，因为根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值