rem布局之font-size入手

最新推荐文章于 2024-03-13 17:37:22 发布

转载最新推荐文章于 2024-03-13 17:37:22 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yxmBetter/blog/905347

文章标签：

#python #ui

本文介绍了一种确保网页元素在不同屏幕尺寸下正确显示的方法。通过使用媒体查询确定基准字体大小，并将元素尺寸转换为相对单位（rem），实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

拿到图，首先查看一下图的大小。然后查看此对应屏幕@media and screen中的html的font-size大小，然后再决定分成多少份，才能测量并写出各距离和宽高等值。举例说一下吧。比如UI给了你750的图，那么一般在你的base.css或者common.css中会有屏幕适配的媒体查询（不懂媒体查询的，可以先看我的这篇博客:[媒体查询，移动端常见布局及其他](https://my.oschina.net/yxmBetter/blog/872642）代码，在其中你会看到750屏幕对应的html的font-size大小，比如是23.5px(也就是在750屏幕中，1rem = 23.5px)；此时，在你750的图上比如测量出一个div盒子的宽度是200px，那么你的适配写法应该是设置div盒子的宽度是：width:200/23.5rem;这样设置才能保证不同屏幕的适配。赶紧试一试吧。如果有帮助记得收藏一下，如果有错误，欢迎纠正哈，多谢！

转载于:https://my.oschina.net/yxmBetter/blog/905347