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

已于 2024-04-13 10:59:09 修改
阅读量475 收藏 6
点赞数 4
分类专栏： 移动端 文章标签： css3 css
于 2024-04-10 16:52:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldd_eb/article/details/137601481
版权

rem适配布局

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

在这里插入图片描述

ldd_eb
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
u013773608的博客
11-14 1865
css3 新语法。
CSS之rem+less+媒体查询
LQlove1的博客
12-25 459
媒体查询（Media Query）是CSS3新语法- 使用@miedia查询，可以针对不同的媒体类型定义不同的样式 - @media可以针对不同的屏幕尺寸设置不同的样式 - 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 - 目前针对很多苹果手机，安卓手机，平板等设备都用得到媒体查询。
媒体查询配合rem使用（HTML+CSS学习笔记二十一）_rem的htmlcss媒体查询代码范文
2401_84302583的博客
05-04 702
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
媒体查询与less
HansonJohn的博客
10-22 209
Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力注意：浏览器不识到Less代码，目前阶段，网页要引入对应的CSS文件VSCode插件：Easy LESS,保存less文件后自动生成对应的CSS文件。
3.24知识总结 rem+媒体查询+less
m0_64492064的博客
03-25 1260
rem适配原理 rem适配方案 less基础 媒体查询语法
less and 媒体查询
weixin_54003765的博客
04-17 1697
1.媒体查询语法 @media screen and (width:500px) 当屏幕宽度500px，执行的样式 媒体查询，就是有条件的执行css样式 媒体查询完整的写法 @media screen and (屏幕宽度) {样式} 简写 @media (屏幕宽度) {样式} 2 语法简写 @media （width：1000px） 3.@media only【not】 screen and (width:400px) only 仅在宽度为400px 是执行 css样式 not 执行某个尺寸之外
精通CSS+DIV配盘
11-04
7. **响应式设计**：利用媒体查询@media，根据设备特性调整页面样式，确保在不同设备和屏幕尺寸下都能良好显示。 8. **CSS预处理器**：如Sass、Less等，它们扩展了CSS的功能，如变量、嵌套规则、函数等，提高了代码...
DIV+CSS网站样例
03-24
5. **响应式设计**：利用媒体查询等技术，使网页在不同设备和屏幕尺寸下都能良好显示。 6. **CSS单位**：了解像素、百分比、em、rem等单位，以及它们在不同场景下的应用。 7. **CSS样式继承与覆盖**：理解样式如何...
大前端学习流程
04-15
* Bootstrap：响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS * 移动Web开发：跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、...
基于JavaScript 实现的开源可视化展示大屏
最新发布
06-18
- 兼容主流浏览器 - 提供很多常用图表 - [折线图]、[柱状图]、[散点图]、[饼图]、[K线图] ## 使用技术 - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础**
CSS.rar_纠缠
09-22
5. **响应式设计**：利用媒体查询(`media queries`)实现不同设备的适配。 6. **Flexbox**：使用弹性布局解决复杂的对齐和布局问题，如等间距排列、自适应内容等。 7. **Grid布局**：CSS Grid提供了二维布局系统，...
使用less传参结合媒体查询，实现手机、平板、PC等多端UI适配
一粒程序米
04-25 632
1.声明变量，@fontSize是要传的参数，注意这个参数，如果要传的是字号，就要驼峰式的@fontSize，如果是想传颜色，就改成@color，如果想传margin-left,就要改成@marginLeft，以此类推…我们把这个当成一个函数，括号里面的参数可以是常量也可以是变量，也可以传多参。
移动端-2（媒体查询+Less基础+rem适配方案+响应式布局+Bookstrap前端开发构架）
2301_80486133的博客
04-05 2211
变量是指没有固定的值，可以改变的@变量名：值；变量名规范：必须以@为前缀；不能包含特殊字符；不能以数字开头；大小写敏感在样式最上方定义一个变量后，后面再写到该变量的设置可以直接引用@变量名。
rem+媒体查询+less
qq_46511756的博客
06-16 619
rem是一个相对单位，它是根据html标签的font-size的字号来决定rem的值。 此时，1rem=35px。媒体查询一个非常大的作用是：。媒体查询语法： 怎么把我们测量的px 转换为适配的rem呢？ 一般将设备宽度分成10等份，加入当前设备宽度是375px，那么html字体大小=37.5px（375 / 10 = 37.5）rem值 = 某px值 / html字体大小（0.26666rem = 10 / 37.5）通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置
移动web开发rem适配布局(rem+Less+媒体查询)
qq_49900295的博客
03-24 1290
文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译 移动端基础 meta视口标签 我们在移动端开发时都要加上这句话： <meta name="viewport" content="width=device-
移动端开发之rem适配布局、媒体查询和Less基础
weixin_63156135的博客
10-20 724
移动端开发之rem适配布局、媒体查询和Less基础
rem适配+媒体查询+less基本使用——理论篇
爱游戏爱学习的博客
04-10 681
使用rem适配布局的好处是：可以使得随着屏幕的不同，里卖你的各种元素也随着改变，进而达到页面的完美布局。
移动端web——rem布局和less语法
david2000999的博客
11-08 378
目录1、rem布局1.1 rem单位1.2 媒体查询什么是媒体查询媒体查询语法规范2、less 基础2.1 解决css弊端2.2 Less 介绍Less 使用之变量Less 嵌套Less 运算3、rem适配方案rem实际开发适配方案1案例：苏宁首页rem 适配方案2 1、rem布局 1.1 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置wi
媒体查询(rem)配合less使用
vGuYi的博客
05-16 980
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 百分比布局特点宽度自适应，高度固定 Flex布局更多的解决了盒子的排列方式，高度很难适配 所以都不能实现 需要配合 rem 单位 设置元素的尺寸（宽度/高度） 最终适配 那么什么是rem了? rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 rem的使用场景： 我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放 媒体查询 设置差异化CSS样式 ..
媒体查询+rem 具体代码实现
05-20
媒体查询和rem可以结合使用，实现响应式布局，以下是具体的代码实现（以适配移动端为例）： 首先在<head>标签内设置页面的缩放比例： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 然后在<style>标签内设置rem的基准值： ```css html { font-size: 16px; } @media screen and (max-width: 767px) { html { font-size: 14px; } } @media screen and (max-width: 479px) { html { font-size: 12px; } } ``` 以上代码表示在不同的屏幕尺寸下，html的字体大小不同，从而实现响应式布局。在CSS中，可以使用rem作为单位，它代表的是根元素（即html）的字体大小。例如： ```css p { font-size: 1rem; /* 等同于html中设置的字体大小 */ line-height: 1.5rem; } ``` 这样，无论在何种屏幕尺寸下，p元素的字体大小都会随着html的字体大小变化而变化，从而实现响应式布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值