前端页面如何兼容不同的分辨率

zhanggongzichu

已于 2025-02-08 13:14:59 修改

阅读量1.2k

点赞数 5

分类专栏：前端 css兼容 CSS3 文章标签：前端大屏端大屏兼容

于 2025-02-08 12:49:34 首次发布

本文链接：https://blog.youkuaiyun.com/zhanggongzichu/article/details/145511689

版权

1.兼容元素

想要让一个项目在不同的分辨率适配，需要首先了解需要适配的内容

需要兼容元素主要包括：

下面拿某一个大屏项目作为例子讲解。

首先说字号部分，字号的兼容写法是通过rem实现的，rem是根据根节点的字号计算页面内部元素的大小，例如根节点设置font-size：14px，那么在内部，写1rem即1*14= 14px。

所以想要实现字号自适应调整大小，只需要让根节点按照不同分辨率计算字号即可，具体代码参考如下

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <link rel="icon" href="/favico