前端页面 屏幕自适应 踩坑日记（一） rem

最新推荐文章于 2023-12-07 00:22:25 发布
最新推荐文章于 2023-12-07 00:22:25 发布
阅读量775 收藏
点赞数
分类专栏： 前端 文章标签： 自适应 rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinyleaf/article/details/81143404
版权

使用rem做尺寸单位时，尤其注意在非文本元素中的 inline-block，line-height,的使用，若没有设定font-size，它是以根元素的font-size为基准的，若使用一定记得加font-size

tinyleaf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发--css--屏幕适配--rem布局
sundanping_123的博客
07-17 376
em 是参照自身文字大小来设置尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,...
【web前端自动化工作环境配置】1.网页屏幕自适应问题
返璞归真
03-08 1086
最近一段时间学做网页，遇到了网页屏幕适配的问题，做的网页不能随着屏幕的缩小而缩小，浏览器缩小，网页就会显示不全，为了解决这个问题，自己也琢磨了几天，也算有了结果，自己也做了如下总结：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;titl
前端浏览器，屏幕自适应技巧以及导航技巧
qq_24192465的博客
08-07 1691
1、图片：只需要设置宽度（因为图片本身已有尺寸，只需设置合适宽度，高度图片会自适应） 2、图示效果实现 html 首页 产品与服务 官方博客--> 关于我们 联系我们 css .nav_mid li{     float: left;     list-style-type: none;     width: 100p
前端页面如何自适应--4种方法
一步一个脚印，踏实努力，向着目标前进
10-29 8797
前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。
页面自适应
最新发布
weixin_62639453的博客
12-07 650
由于最近在开发一款数据化可视化大屏项目，而这种项目需要适应大屏幕，或者说所有前端页面都应该做到适应不同屏幕尺寸，达到页面可适应的效果。
前端页面实现自适应
01-08
比如实际浏览器 2732 宽 同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化 var deviceWidth（不考虑兼容性可使用vw,vh获取视图...
web页面自适应，rem作单位
09-23
js代码实现页面自适应，css样式可以用rem来做单位，实现界面随浏览器变化而自适应大小
手机端页面rem宽度自适应脚本
09-03
本文将介绍手机端页面通过rem实现宽度自适应脚本的核心思路和技术细节。 首先，理解rem单位的含义是关键。rem（Root EM）与em单位相似，不同之处在于em单位是相对于当前元素的字体大小，而rem始终是相对于根元素...
关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip屏幕自适应
01-14
在网页设计领域，屏幕自适应是一项至关重要的技术，它使得网站能够优雅地适应不同设备的屏幕尺寸，提供良好的用户体验。"rem"（Root Em）单位是实现这种自适应布局的关键工具之一。本教程将深入探讨rem单位，以及...
10-CSS-rem适配布局
...
03-13 3713
思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
前端大屏自适应踩过的坑
kgjfk的博客
09-20 625
自适应大屏项目踩过的坑
前端移动开发屏幕自适应的最好办法
qiushi888的专栏
07-17 2229
前言 因为移动端屏幕尺寸大小不一，前端开发的时候，往往根据psd大估摸的进行开发，利用百分比进行兼容 这样做出来的页面和psd可能非常不一样，且开发缓慢   目的 1、开发者只需要量取psd的尺寸直接写到css中，无需考虑屏幕兼容 2、系统根据屏幕大小自动生成相应的css尺寸，小屏自动缩放，大屏自动放大，完全和psd相同   解决方案 我们在写css的时候在相关尺寸的地方换一种方...
一套1280*800 ，如何屏幕适配
韩梦飞沙_韩亚飞
09-14 383
作者：韩亚飞_yue31313_韩梦飞沙  QQ:313134555
[转]移动前端自适应解决方案和比较
weixin_34007906的博客
04-02 2984
移动前端自适应解决方案和比较 昨天晚上仔细看了这篇文章，写的很好，转载下来，常记于心. 以下文章摘自:前端开发博客 (http://caibaojian.com/mobile-responsive-example.html) 以下为正文: 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用f...
前端自适应页面大小
做你的时光机的博客
07-25 1598
前端自适应屏幕大小 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="descrip...
前端页面的适配使用rem换算
高山景行，一尘不染
08-15 1463
大名鼎鼎的Flexible 原理：flexible.js正是利用rem单位相对根元素&lt;html&gt;的font-size来做计算，而我们需要做的就是根据不同的屏幕算出html的font-size，而页面内的大小单位都根据rem来写，从而实现了自适应。 引入： 直接引用阿里的CDN文件（或下载到本地引入） &lt;script src="http://g.tbcdn.cn/mtb/l...
大屏框架 等比缩放的页面（利用css3的scale属性）
qq_37899792的博客
04-28 8982
HTML <!DOCTYPE html> <html lang="en"> <head> <!-- 编码设置 --> <meta charset="utf-8"> <!-- 告诉IE使用最新的引擎渲染页面 --> <meta http-equiv="X-UA-Compatible" ...
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
热门推荐
Sabrina_cc的博客
04-25 1万+
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 => 使用transform:scale => 组件化抽离ScaleBox=>【两分钟实现大屏自适应】
html文件前端页面 做样式自适应rem 代码
04-28
可以使用以下代码实现基于 rem 的自适应布局： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rem 自适应布局示例</title> <style> /* 以下为基于 rem 的自适应布局代码 */ html { font-size: 62.5%; /* 1rem = 10px, 10px * 62.5% = 6.25px */ } body { font-size: 1.6rem; /* 1.6rem = 16px */ } .box { width: 6.4rem; /* 6.4rem = 64px */ height: 3.6rem; /* 3.6rem = 36px */ } </style> </head> <body> <div class="box">这是一个自适应的盒子</div> </body> </html> ``` 在上述代码中，我们通过设置 html 的 font-size 为 62.5%（即 1rem = 10px），然后通过设置 body 的 font-size 为 1.6rem（即 16px），就可以实现基于 rem 的自适应布局。在样式中，我们可以直接使用 rem 作为单位，比如设置宽度为 6.4rem（即 64px），高度为 3.6rem（即 36px），这样就可以实现自适应布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值