移动端响应式适配的方法

最新推荐文章于 2024-05-16 13:18:18 发布
最新推荐文章于 2024-05-16 13:18:18 发布
阅读量222 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59070120/article/details/126139212
版权

个人理解，移动端适配的方法就算设置他的宽度

1，对于简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕

2，可以使用%和vh，vw作为单位，也可以使用flex来进行布局

3，使用媒体查询配合rem来进行适配,1rem等于1比例根元素的font-size的px

4，根页面的根元素设置：min-height:calc(100vh),然后其子元素的页面的高度可以直接设置固定值，宽度使用用百分比，也可以使用flex来布局

大鸡腿最好吃
关注
基于REM的移动端响应式适配方案（未完待续）
人生代码 ---- 公众号
03-23 427
视口 在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, ...
移动端响应式适配
weixin_44098552的博客
11-11 1196
目前主流的适配方案有三种（1.媒体查询，2，通过js脚本，3，通过vw,vh) 1.媒体查询 通过媒体查询设定根元素的font-size,进入全局使用rem，达到移动端自适应 设计稿是750px*1334px,我们设置的font-size是100px，则对应1rem。很好换算，除以100就可以了 @media screen and (max-width:319px){ html{font-size:42.67px;} } @media screen and (min-width:320px) .
移动端适配方案
lichao000124的博客
07-19 253
移动端适配（一）移动端适配方案（二）响应式设计相关的几个概念（三）获取窗口大小的api（四）横屏适配问题（五）移动端调试 （一）移动端适配方案 1、缩放 动态设置标签 (function adapt(){ const cueWidth = window.screen.width; const targetWidth = 750; const scale = curWidth / targetWidth; const meta = document.createElement('meta'); me
基于REM的移动端响应式适配方案
weixin_30615767的博客
07-06 106
视口 在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, ...
移动端适配与响应式布局
weixin_30578677的博客
08-11 210
同样也是欠缺的知识之一。几片博文献上： 浅谈前端移动端页面开发（布局篇）：http://www.xiaoxiangzi.com/Programme/CSS/4298.html 移动端高清、多屏适配方案 总结个人使用过的移动端布局方法：http://www.techweb.com.cn/network/system/2017-07-24/2562966.shtml 手机端页面自适应解决方...
基于rem的移动端响应式适配方案(详解)
08-30
基于rem的移动端响应式适配方案详解 移动端响应式适配方案是当前移动端开发中非常重要的一环。随着移动设备的普及，移动端响应式适配方案成为了移动端开发的必备技能。本文将详细介绍基于rem的移动端响应式适配方案...
移动端响应式布局
MartinYP的博客
08-10 1315
个人学习笔记
企业级网站源码-蓝色技术业务服务-响应式适配移动端模板-响应式适配移动端.zip
03-20
响应式布局，全方位适配设备，随时随地保持你的在线形象高度专业。 定制化灵活，易于学习和修改，让你的网站与众不同，彰显个性。 优化代码结构，SEO友好，为你的网络存在建立坚实基础，提高可见度。 赋予自己互联网...
移动端响应式UI布局解析
02-25
文章简要分享了移动端响应式UI的7种布局，希望能够对你的从产品工作带来一些借鉴。为什么要说响应式UI，它能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配，保证布局和体验的一致性。毫无疑问，响应UI设计对于...
15响应式 移动端适配 多列布局
m0_49788155的博客
10-31 245
15响应式 移动端适配 多列布局 一、响应式 一套代码能够适应多个终端，都有一个好的显示效果，这就是响应式 原理：利用媒体查询 @media drp = 物理像素 / 逻辑像素 物理像素 设备本身决定的 逻辑像素 开发者用的像素 理想视口：可视视口和布局视口是1:1的关系 实现理想视口的方式 <meta name="viewport" contnet="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user
移动端适配（rem，vw）+响应式布局
最新发布
G24gg的博客
05-16 763
Less 是一种动态样式语言，它扩展了 CSS 的功能，使得编写 CSS 更加高效和易于维护。Less 通常被称为 CSS 预处理器，因为它用特殊的语法和功能扩展了 CSS，最终会被编译成普通的 CSS 代码，以便浏览器可以正确解析和应用。 以下是 Less 的一些主要特点： 三、Bootstrap前端框架(Foundation等) 一、官网下载 min体积小，压缩过下载别忘了bi-
谈谈响应式布局或移动端适配
wukeyan的博客
07-29 840
自适应、响应式、rem弹性布局曾经它们划分的界限还是比较明显的，但现在基本都是综合运用了就是为不同尺寸的屏幕设定不同的CSS样式，一般用在移动端
css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap
qq_66318904的博客
03-25 1661
less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。
移动端适配及响应式开发
qq_42453238的博客
07-31 309
移动端适配的meta标签及其含义 <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> 移动端适配流程 CSS的一些单位 1、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em特点： em的值并不是固定的； em会继
移动端适配方案有哪几种？
热门推荐
weixin_49429586的博客
09-28 1万+
什么是移动端适配？什么是rem适配？什么是响应式？移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。
移动端响应式适配：基于rem的深度解析
"基于rem的移动端响应式适配方案(详解)\n本文将深入探讨基于rem的移动端响应式适配方案，旨在帮助开发者更好地理解和应用这一技术。我们将涉及的关键概念包括视口、像素、媒体查询以及如何利用rem进行适应性布局。\n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值