移动端自适应布局-rem

最新推荐文章于 2024-07-31 02:32:11 发布
最新推荐文章于 2024-07-31 02:32:11 发布
阅读量116 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43162630/article/details/118513746
版权
本文探讨了移动端自适应布局中rem的使用。通过设置viewport和html的font-size，实现等比例缩放。介绍了如何计算html的font-size，通常基于设计图宽度和固定系数，并提到了在VSCode中配置Root Font-Size以及使用px2rem扩展进行单位转换的方法。
摘要由CSDN通过智能技术生成

自适应布局

  1. 设置viewport进行缩放

    参考rem是如何实现自适应布局的？-前端开发博客 (caibaojian.com)

  2. 在html中设置font-size

    rem等比例，设置html的font-size

    1. 通过设置html的font-size属性，其中计算如下：

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oEoUC5B7-1625537862755)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210705173350010.png)]

      那怎么确定html的font-size呢

      1418903956

      其中宽度为屏幕宽度，

    2. 在vscode设置Root Font-Size

      将px转为rem

      参考vscode如何将px转换为rem-站长资讯网 (info110.com)

      文件——》首选项——》设置——》扩展
      在这里插入图片描述

      root font-size = 750/10 = 75

      (750为设计图的宽度，10为固定系数)

      没有的话，在扩展里面安装：px2rem
      在这里插入图片描述
      疑惑：font-size = 总屏幕宽度/系数，系数怎么来的

雅七岁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端自适应布局-rem.js
09-19
使用rem单位实现自适应布局，轻松掌握移动端开发。用法简单，比如普遍的设计图宽度为750px，那么在css中设置为7.5rem即可实现宽度100%
html5移动端自适应布局的实现
11-21
HTML5移动端自适应布局是现代Web开发中的关键技术，它使得网页可以无缝适应不同尺寸的设备，无论是手机、平板还是桌面电脑。以下是两种常见的自适应布局实现方式的详细解释： 1. **媒体查询（Media Queries）** ...
【面试】移动端的自适应布局如何实现？
weixin_62918410的博客
03-29 2452
移动端自适应
rem实现自适应布局小结
Ldcrle的博客
05-10 1509
简要概述 自适应布局是指页面在不同大小的终端设备呈现时，页面的结构和样式都会根据屏幕的大小去显示适合当前屏幕大小的页面，较好地提升用户体验。 个人理解：像不同身材的人穿同一款式的衣服时有一个适合自己的型号选择，而不是穿同一件衣服，瘦小的身材人扎起来穿，胖大身材的人使劲撑着穿。 关于rem(root em)和em em em在css中是一种相对长度单位，类似于百分数，相对于当前元素的字体尺寸根据比例因子进行放缩。如一般字体大小默认为16px，则2em =16 X 2 =32px。 rem rem 是根 em（
网页适配（移动端网页布局方案）
2401_84341495的博客
06-15 981
原因是在dpr为2或者更高的屏幕上，1px其实占据的真实物理像素为2px或更多，设计师的本意肯定是1px就是1px，所以就会出现1px的问题。可以采用rem单位去制作1px的边框，虽然可以一定程序上避免1px的问题，但是会出现不精准的情况，这就需要跟设计师沟通看这个问题是否可以接受。，使用flexible适配方案可以避免iphone端1px的问题，因为flexible方案考虑了iphone端的dpr问题，但是安卓端是没有考虑dpr的，所以安卓端1px问题根据需求需要处理;
移动端自适应布局 rem布局（简单直接）
半兽先生的博客
07-25 1874
移动端自适应布局 rem布局（简单直接）
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
weixin_67244432的博客
04-29 2144
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
rem自适应布局用法及详解
热门推荐
前端~锋小张
04-26 1万+
对于很多新同学来说，rem还是比较熟悉而又陌生的， 熟悉呢是因为rem时常出现在耳边，陌生呢是因为又搞不清原理。今天咱们一起来弄清楚rem到底是怎么一回事！原理：css3规定：1rem的大小就是根元素<html>的font-size的值。通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， ...
PC、移动端自适应等比缩放布局方案
11-16
### PC、移动端自适应等比缩放布局方案 随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...
基于vue-cli配置lib-flexible + rem实现移动端自适应
11-30
总之，通过`lib-flexible`和`rem`单位，结合`px2rem-loader`，我们可以实现移动端的自适应布局。正确配置和使用这些工具，可以确保你的项目在不同设备上呈现一致的视觉效果。在实际项目中，还需要根据具体需求进行...
浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)
09-22
本篇文章主要介绍了浅谈移动端的自适应问题(响应式、rem/em、Js动态),非常具有实用价值，需要的朋友可以参考下
rem布局实现不同分辨率移动终端的自适应、整体缩放
12-30
rem布局实现不同分辨率移动终端的自适应、整体缩放。另外界面UI也很不错哦！ 本附件相关博文地址：http://blog.csdn.net/irokay/article/details/78935838
使用Rem布局实现自适应
11-21
之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。 为什么要自适应？ 比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。 在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone
转载（web app变革之rem）
weixin_30699741的博客
12-26 759
rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r...
移动端自适应布局（响应式/百分比）
qq_43954902的博客
11-11 533
主要解决移动端机型长宽不同的自适应的方案（pc也可适用）
移动WEB开发之rem适配布局
surx123456的博客
04-05 941
Less是一门css预处理语言，他扩展了css的动态特性。
rem单位做界面自适应（等比扩大）
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 792
rem是一种CSS长度单位，代表“root em”，即相对于HTML根元素（）的字体大小。这使得我们可以创建基于全局字体大小的比例布局，从而实现跨设备的自适应效果。通过本文的学习，你应该已经掌握了如何使用rem单位来进行等比例放大的布局设计。这些技巧不仅可以帮助你创建更加灵活和响应式的网页，还能让你的网站在各种设备上表现出色。在实际开发中，记得灵活运用这些技巧，并结合具体情况做出最佳选择。欢迎来到我的博客，很高兴能够在这里和您见面！
使用rem实现pc、移动端自适应布局
qfCSDN的博客
11-18 5644
可以根据设计稿宽度设置，获取到当前屏幕font-size大小，设置到蓝湖上，直接转换为rem进行布局即可。1rem的大小是通过html下的根字体大小（font-size）这个css属性告诉浏览器的。比如 ： 设置html当前font-size = 10px；那么1rem = 10px;（假如设计稿宽度是750），有一个预设的rem和px的比例。（假如是425px），那么他此时1rem的尺寸。2.获取用户浏览器的可视区域的宽度。（假如是1rem = 10px）
html移动端布局与页面自适应布局
weixin_48687415的博客
12-21 3551
常见的布局方式，这里指的是对于width和height在不同页面情况下的改变， 1.比如使用px，就是固定其高宽，不论页面怎样放大缩小，其占领的依旧是，使用px固定了的高宽。 2.又比如弹性布局，没有设置内容盒子的大小，其放大缩小所占的比列一样，但大小不一样 还有响应式布局，媒体布局等等，所以综上： 常见的页面布局方式有： 1.静态布局 即传统的固定px的布局 2.流式布局(Liquid layout)(栈栏系统) 主要划分区域的尺寸使用100%来表示 3.自适应布局（媒体查询布局） 即创建多个静
移动端自适应布局 rem
09-01
移动端自适应布局 rem 是一种相对单位，它是相对于根元素(html标签)的字体大小来计算长度的。通过给根元素设置一个基准字体大小（一般是10px），然后使用rem作为其他元素的长度单位，可以使页面中的元素按照比例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值