移动web开发之自适应布局解决方案一: less+媒体查询+rem

已于 2023-08-17 10:33:03 修改
阅读量1k 收藏 3
点赞数
分类专栏： JS实战记录 文章标签： 前端 less web app
于 2021-12-11 21:01:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/121871468
版权

移动web自适应布局有两种方案：1.less+媒体查询+rem 2.flexible.js+rem (推荐)
推荐方案2，下面我们一起来学习一下。

less+媒体查询+rem

less这种CSS 预处理语言我们可以去less中文网学习，这里不复述。less+媒体查询+rem实现自适应布局的原理是通过动态设置html标签的font-size大小，然后页面元素以rem作为单位从而可以适配不同屏幕。请添加图片描述
请添加图片描述
下面我们用此方案来做个苏宁移动端的demo
1.安装node，安装成功之后通过node -v查看node版本。
2.安装less，在node安装好之后通过命令npm install -g less或npm install less less-loader --save-dev来安

了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
移动web开发-rem布局案例源码，html+css素材
02-16
移动web开发-rem布局案例源码，html+css素材
移动端项目，仿苏宁移动端（rem+less+媒体查询）
11-10
此项目开发采用的技术：html5、css3、rem、less、媒体查询、二倍精灵图 采用的字体图标是阿里icon 采用淘宝开发的flexble.js自动计算rem 项目只有首页，适应各种移动端尺寸
Web页面布局
qq_52570860的博客
07-14 750
Web 自适应布局是指使用 HTML 和 CSS 创建的布局，能够根据浏览器窗口的大小自动适应不同的布局。相反，自适应布局、响应式布局等动态布局方式越来越受到重视，因为这些布局方式能够根据不同设备的特性和屏幕大小，动态调整页面布局，提高用户体验。此外，需要注意的是，流式布局不是适合所有场景的。总的来说，响应式布局和弹性布局是目前比较流行的布局方法，因为它们能够更好地适应不同的屏幕尺寸和分辨率。需要注意的是，在实际开发中，自适应布局和响应式布局不是非此即彼的关系，它们可以结合使用，以提高网页的适配能力。
web自适应的实现和原理
u014298350的博客
01-25 1954
预读 rem rem作为一个单位是受 html 标签的 font-size 变化而变化的 <html style="font-size:24px;"> <body> <div style="font-size:.5rem;"></div> </body> </html> 因上可得：通过控制 html 的 font-size 来达到一个简单的自适应 实现自适应 在 html 中添加 <meta name="viewport
浅谈Web自适应
嘿嘿
01-29 1455
前言 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 1 <meta
Web移动端实现自适应缩放界面的方法汇总
油墨香^-^的博客
09-14 3767
实现没办法，我后面尝试，通过userAgent对ipad机型(ipad、macintosh)特殊处理，直接获取所有包含了文字的div、p、span等元素，放大font-size。position：fixed，宽高显示有问题 -- 设置固定宽度，比如375px，固定高度；发现可以处理，没毛病！但是也有些缺陷，没办法在一开始处理字体，因为元素还没有初始化，而等界面加载后再刷字体大小，界面会闪现一次。但是坑来了：真机有问题，发现在ipad的safari上，页面是放大了，但是字段根本就没变化！
如何实现响应式（自适应）网页
zyf971020的博客
10-14 942
如何实现响应式（自适应）网页
css 网页自适应方案 大屏自适应方案
热门推荐
海胆的博客
09-20 1万+
rem的方案对于1920及以上分辨率屏幕来说基本适用，但当切换到1366*768等小分辨率时，由于浏览器默认。写死的，也会出现超出画布的问题，因此衍生第二种方案： scale缩放。css 相对单位，相对于根元素的 font-size 值的大小。将设计到的单位转化为rem单位就可以实现等比例的自适应缩放。，所以会导致文字比理想效果更大， 而echarts生成的。直接计算每个像素在设计稿中占据的%来输出vw，rem。比例不对的情况下，画面可能会被压缩。一些图表的自适应方式需要特别处理。DataV 数据大屏。
前端页面如何自适应--4种方法
一步一个脚印，踏实努力，向着目标前进
10-29 7024
前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)学习笔记
移动WEB开发04-媒体查询+rem实现元素动态变化.html
04-14
移动WEB开发
移动web开发，rem适配方案
10-31
涵盖了移动web开发技术，多种移动web开发方案，例如flexible.js+rem适配、less+rem+媒体查询适配方案
vue + less移动端自适应布局
qq_43477721的博客
02-02 1096
还是可以写px，但是插件会自动转换，一般情况下，自适应还是不错的，但是模拟器换到ipad ，iPhone X，自适应效果好像就没有那么好（不知道是不是自己本身写的样式问题） 1.安装 postcss-px2rem px2rem-loader $ npm install postcss-px2rem px2rem-loader --save-dev 2.配置 px2rem 单位 在 /build/...
用less使页面随着屏幕放大缩小并用媒体查询
qq_57540936的博客
11-17 571
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); ...
38. 适配布局
potato123232的博客
07-21 1905
之后你在定义元素宽高的时候都使用rem作为单位，比如你在原型图上看到了一个宽150px，高200px的盒子，那么你给的时候就应该给width3(150/50)rem，height4(200/50)rem。如果这里你没有使用less，也不想用计算器一个一个算，那么你可以使用vscode中的插件cssrem，这个插件在你写px的时候，会自动帮你转换成rem，使用方式在这里有介绍。好处是使用rem为单位，我们只需要修改html的字体大小，就可以改变所有元素的大小，而且是等比例改变。.........
前端必知：22.流式布局和媒体查询（附加简单的自适应布局案例）
qq_52799985的博客
07-23 198
流式布局是一种在网页设计中常用的布局方式，它的目标是实现在不同屏幕尺寸下内容的自适应和流动性。在流式布局中，元素的大小和位置通过相对单位或百分比来定义，以便根据视窗大小的变化而调整。流式布局的好处是可以适应不同设备和屏幕尺寸，提供更好的用户体验。它可以使网页内容自动适应于不同屏幕宽度，避免了在小屏幕设备上出现滚动条或内容被截断的问题。而且，在大屏幕设备上，流式布局可以确保内容不会显得稀疏而留下大量空白区域。媒体查询是CSS3中的一个特性，它允许我们根据不同的媒体设备和视窗尺寸应用不同的CSS样式。
php 网站移动端自适应,HTML5实现移动端自适应的几种方法介绍
weixin_40003512的博客
03-18 238
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下1、使用meta标签：viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
rem自适应布局
06-02
REM自适应布局是一种基于CSS3新特性的网页布局方式，它利用REM（根元素字体大小）作为参考值，根据屏幕宽度动态改变HTML根元素的字体大小，从而实现网页元素的自适应布局。通过设置REM的值，可以方便地实现不同设备屏幕的适配。同时，REM还可以与媒体查询结合使用，实现不同屏幕尺寸下的布局调整。 实现REM自适应布局的关键是要将设计稿中的尺寸转换为REM单位，然后通过设置根元素字体大小来实现网页元素的自适应布局。一般来说，设计稿中的尺寸需要除以一个基准值，例如设计稿中的字体大小为16px，基准值为20px，则转换为0.8rem。 以下是一个使用REM实现自适应布局的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>REM自适应布局示例</title> <style> html { font-size: 62.5%; /* 将1rem设置为10px */ } body { font-size: 1.6rem; /* 设置默认字体大小为16px */ margin: 0; padding: 0; } .container { width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { width: 30%; margin-bottom: 20px; background-color: #f2f2f2; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; } @media screen and (max-width: 768px) { .box { width: 48%; } } @media screen and (max-width: 480px) { .box { width: 100%; } } </style> </head> <body> <div class="container"> <div class="box"> <h2>Box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="box"> <h2>Box 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="box"> <h2>Box 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </body> </html> ``` 在上面的代码中，我们将1rem设置为10px，这样设计稿中的尺寸除以10就可以得到对应的REM值。例如，设计稿中的字体大小为16px，对应的REM值为1.6rem。 同时，我们使用了Flexbox布局和媒体查询来实现不同屏幕尺寸下的自适应布局。在媒体查询中，我们根据屏幕宽度动态改变了盒子的宽度，从而实现了响应式布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值