rem文字适配和Flex布局

最新推荐文章于 2022-12-05 22:52:15 发布
最新推荐文章于 2022-12-05 22:52:15 发布
阅读量156 收藏
点赞数 1
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44236920/article/details/125451095
版权

 

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。

而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。

而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float

 Flex布局

 

 rem单位

 

浩笑
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
弹性盒子flex布局及rem布局（前端面试题系列）
hjp991028的博客
12-17 623
弹性盒子flex布局及rem布局（前端面试题系列）
移动WEB开发（流式布局、flex布局、rem适配布局）
linmuqi0928的博客
03-30 796
一、流式布局 视口：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 我们移动端布局最想要的是理想视口。 理想视口：对设备来说，是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。 meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽。 meta视口标签 <meta name="viewport" content="width=device-width, user-scalable=no
【Rem文字适配和flex布局】
weixin_47740096的博客
06-24 324
css学习之rem适配和flex布局
移动端Web开发 流式布局、flex布局、rem布局
YuLong的博客
09-30 1507
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less 移动端Web开发 流式布局 在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备，在移动设备和跨平台（响应式）网页开发过程中，多数使用流式布局。 流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。 流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度，其换算公式如下：目标元素宽度 / 父盒子宽度 = 百分数
移动端（三）—— rem适配和flex适配
youkino222的博客
12-09 8720
之前说过百分比适配、比例缩放适配和viewport适配，但是，现在的主流适配方案是rem适配，它很强大。 4、rem适配 首先说说常用像素单位： 常用像素单位 1. px 绝对单位，给多少就是多少， 问题：不管屏幕尺寸怎么变化，它都不会变。做不到适配 2.em 相对单位，相对于自身字体大小的值 font-size:12px 1em=12px 问题： ...
vue中使用rem布局代码详解
12-13
本文将详细介绍如何在Vue项目中配置和使用rem布局。 首先，我们需要安装`amfe-flexible`库，这是一个针对移动设备的适配解决方案，它会根据屏幕宽度动态设置HTML的font-size。在命令行中运行以下命令： ```bash ...
Mobile_Adapter:移动端适配方案（rem 和 vwvh）
05-11
Mobile_Adapter使用create-react-app的前端适配方案px 转 rempx 转 vw 或者 px 转 vh 使用 `create-react-app`脚手架创建项目或者使用本例中两个示例模板创建（`npm install`） 根据不同的适配方案，使用不同的文件...
flexible.js实现移动端rem适配方案
11-20
总之，`flexible.js`通过动态调整`fontSize`和使用`rem`单位，实现了响应式设计，使得网页能在不同分辨率和尺寸的设备上保持良好的布局和视觉体验。开发者可以通过集成这个库，简化移动端适配工作，提升用户体验。
lgg-flexible:移动端适配方案（flex + rem + dpr）, lgg-flexible 主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC 一些问题
05-14
看来了一些关于移动端布局的资料，目前最佳的移动端移动端适配方案（flex + rem + dpr）, 自己也根据原理写了 lgg-flexible， 主要动态控制 rem 和 dpr 来适配不同移动端。增加一些特性可去调控 rem 适配带来 PC ...
数据可视化基础项目+h5css3+javascript+echarts+flex+rem适配
05-18
开发者不仅需要掌握HTML5、CSS3和JavaScript的基本语法，还要理解ECharts的用法，以及如何利用Flex布局和REM进行响应式设计。此外，熟练使用Iconfont来处理图标也是提升用户体验的重要一环。通过实践这样的项目，...
简述弹性盒子flex布局及rem布局
ll123456789_的博客
12-05 317
弹性盒子flex布局及rem布局
移动端适配：使用flex布局和rem
小菜鸡程序媛的挣扎史
08-23 3872
目录 一、使用rem和flex布局 1.先说说几个前端常用的几个单位的概论： 2.开始进入rem教程 3、媒体查询（插播：比较繁琐不推荐） 4、通过less方法写函数来简化代码 5、解决div字体font-size兼容问题 一、使用rem和flex布局 1.先说说几个前端常用的几个单位的概论： 1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像...
简述弹性盒子 flex 布局及 rem 布局
m0_71231013的博客
05-27 705
rem简介： rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小适配方案步骤： 1、首先动态计算 html 的 font-size 2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-si
运用flex和rem为移动端布局
Aijn_faluts的博客
11-11 1670
flex是对于页面一个非常重要的样式，不会用到px来布局，用rem来代替 rem是根据根文档，也就是html标签上的字体大小来运算的1rem=16px; 手机端的布局也很简单，掌握好flex所有的属性和rem写页面就是一件很轻松的事。 flex的知识过多，咱们只说能应用到的： HTML &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&g...
移动端屏幕自适应解决方案，rem单位和flex布局结合使用
yuan_618859的博客
03-12 1311
那些年我们一直搞不懂的rem是怎么用的，其实人家官方已经说得很明白了，就是那样。不过我们就是越看越不懂，呜呜 移动端自适应方案 页面加载时运行js，修改HTML根元素字体大小 结合rem单位 flex布局 1.js代码：（以下2个版本-任意一个都行） 只需要将这代码引入到页面就好。 （注意：designWidth这个值自己一定要改成你自己的设计稿宽度） 简约版： (function (...
rem+flex实现自适应布局
pinena的博客
03-11 2666
rem是相对于根元素&lt;html&gt;，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。引用query.css，屏幕分辨率改变，对应的字体大小也会改变。query.css使用媒体查询来改变字体大小，字体大小要设置多大实际要根据设计师的要求来处理。下图是我实际开发项目中设置的query.css。 布局的传统解决方案，基于盒状模型，依赖display ...
rem(移动端:用百分比,rem,和flex布局一起写)?
weixin_34074740的博客
12-28 1318
rem rem就是root element的简写(html就是根元素),默认情况下html字体大小是16px,1rem=html的字体大小就是16px 移动端的产品形态分为两种 1.一种对于布局简单,内容少的网站,大部分pc和移动公用一套,比如摩拜就是用媒体查询就是做了一套pc和移动端的网页 2.对于像淘宝,还有一种产品形态,就是内容比较多的,布局比较复杂的,就是pc和移动分离的,那对于纯粹...
关于移动端简单适配字体大小hostcss
冲锋
06-30 3608
采用flex+rem的方式进行布局和完成移动端的适配 rem（font size of the root element）是相对长度单位。 相对于根元素（即html元素）font-size计算值的倍数。 适配原理：将px替换成rem，动态修改html的font-size适配。 它可以很好的根据根元素的字体大小来进行变化，从而达到各种 屏幕基本一直的效果体验 三行js代码简单适配 //得到...
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布局和媒体查询来实现不同屏幕尺寸下的自适应布局。在媒体查询中，我们根据屏幕宽度动态改变了盒子的宽度，从而实现了响应式布局。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值