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

原创 已于 2024-04-13 10:59:09 修改 · 654 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css

于 2024-04-10 16:52:25 首次发布

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

在这里插入图片描述

移动web开发之自适应布局解决方案一: less+媒体查询+rem
qq_37635012的博客
12-11 1288
移动端自适应解决方案之rem和媒体查询
移动端开发之rem适配布局、媒体查询和Less基础
weixin_63156135的博客
10-20 912
移动端开发之rem适配布局、媒体查询和Less基础
CSS3单独制作移动端页面布局方式(rem+媒体查询+less布局、vw/vh布局、vmin/vmax布局)
最新发布
Bulut0907
03-11 1383
CSS的缺点CSS是一门非程序式语言，没有变量、函数、scope作用域等概念。CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的不方便维护及扩展，不利于复用CSS没有很好的计算能力Less的介绍常见的CSS预处理器有：Less、Sass、Stylus。Less(Leaner Style Sheets)是一门CSS扩展语言，它并没有减少CSS的功能，而是在现有的CSS语法上，引入了变量、Mixin(混入)、运算以及函数等功能。为CSS加入程序式语言的特性，大大简化了CSS的编写。
less+rem+媒体查询布局
leekos的博客，分享web安全相关知识~
02-15 1440
问题： 1. 页面布局文字能否随着屏幕大小变化而变化? 2. 流式布局和flex布局主要针对于宽度布局,那高度如何设置? 3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. rem基础 rem单位 rem (root em)是一个相对单位, 类似于em , em是父元素字体大小。 不同的是rem的基准是相对于htm元素的字体大小。 比如,根元素( html )设置 font-size= 12px; 非根元素设置 width:2rem; 则换成px表...
移动web开发之rem布局和less的相关
zh_hunan的博客
11-04 468
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同...
媒体查询+rem移动端布局
weixin_46567428的博客
04-12 851
媒体查询+rem布局移动端布局1.移动端基础2.视口3.二倍图4.移动端调试5.移动端常见布局6.移动端开发之rem布局方案？6.1 rem单位6.2 媒体查询6.2.1 什么是媒体查询？6.2.2 媒体查询的语法规范6.2.3 媒体查询 + rem实现元素动态大小变化6.2.4 引入资源 移动端布局 1.移动端基础 2.视口 viewport 3.二倍图 物理像素 像素比 4.移动端调试 chorme模拟手机调试工工具 5.移动端常见布局 现在市场上主要有两种布局方案： 单独开发移动端（
移动Web开发--学习笔记四 Less+Rem响应式项目实战（仿苏宁）
水滴的专栏
04-06 350
Less+Rem响应式项目实战 在浏览器端使用less less无法在浏览器端直接使用,浏览器不识别 必须解析成css代码 通过less解析插件（javascript） 引入less文件需要加上type="text/less",less解析插件会遇到type="text/less"时进行解析，其他不解析 less.watch(); 无刷新预览样式 以http形式打开网页预览,<script...
移动web开发rem+js适配布局开发
每天都要努力学习哦~~
01-07 1551
视口 视口(viewport) 就是浏览器显示页面内容的屏幕区域,视口分为 布局视口 视觉视口和理想视口 布局视口:layout viewport 一般设备的浏览器设置了一个布局视口,用于解决早期pc端页面在手机上显示的问题 rem基础 rem (root em) 是一个相对单位,类似于em是父元素字体大小,不同的是,rem的基准是相对于html元素字体大小 rem的优点:可以通过修改html里面的文字大小来改变页面元素中的大小可以整体控制 rem+js 用过js动态获取屏幕宽度修改ht
移动布局之rem适配布局、Bootstrap前端开发框架
N奈斯先生的博客
09-10 1277
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、 二、每日面试题 一、 ...
017、移动WEB开发之 rem 适配布局
weixin_46390041的博客
05-08 366
掌握 rem 基础知识、媒体查询制作方法、Less 的使用方法、rem 适配方案
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3718
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
媒体查询、LESS基础
yangyanqin2545的博客
11-19 671
媒体查询 在不改变页面内容的情况下，为不同的设备特性（屏幕尺寸、横竖屏等）定制显示效果 语法： 样式表内引入（内、外部样式表） @media 媒体类型 and (媒体特性表达式){ //样式 } 常用媒体类型 all 所有 screen 屏幕设备 常用媒体特性 width/height 宽高 device-width/height 设备宽高 min- / max min-width/height 横竖屏 orientation： landscape portrait 竖屏
前端移动开发布局_rem+less+媒体查询
宫小白
01-28 509
知识导航 何为rem 何为媒体查询 何为less 1. 何为rem rem (root em)是一个相对单位，类似于em，em是父元素字体大小。而rem的参照物是html的fontsize 比如 html { font-size: 20px; } div { width: 2rem; ...
rem+媒体查询+less
qq_46511756的博客
06-16 700
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文字大小，元素设置
H5移动开发布局之-------rem布局与媒体查询（less）
weixin_45176415的博客
11-03 976
rem 布局 1. 基本概念 语法：只要子元素的属性值，设置采用rem单位，就会跟着发生等比变化；唯一控制（HTML是唯一）； rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制； -例子 1.根html 为 15px html { font-size: 15px; } 2.此时 div 的宽就是 100px...
移动web开发rem适配布局(rem+Less+媒体查询)
qq_49900295的博客
03-24 1877
文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译 移动端基础 meta视口标签 我们在移动端开发时都要加上这句话： <meta name="viewport" content="width=device-
less and 媒体查询
weixin_54003765的博客
04-17 1912
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 执行某个尺寸之外
媒体查询(rem)配合less使用
vGuYi的博客
05-16 1239
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 百分比布局特点宽度自适应，高度固定 Flex布局更多的解决了盒子的排列方式，高度很难适配 所以都不能实现 需要配合 rem 单位 设置元素的尺寸（宽度/高度） 最终适配 那么什么是rem了? rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 rem的使用场景： 我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放 媒体查询 设置差异化CSS样式 ..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值