问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

rem和em为什么可以做动态适配大小而px单位不行

头像
Futurefinger
    98720179204

    最近项目需要兼容很多类型的手机屏幕，对于字体设置这块挺多疑惑的。

    根据不同的设备宽度（物理宽度）有不同的计算方法：
    如图：
    http://520ued.com/uploads/20141218/14189...
    clipboard.png

    clipboard.png
    公式推导
    1px=16em;
    实现1px=10em;// 10÷16*100 = 62.5%
    看了手机屏的一些规范
    320width=10px;//
    举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
    读过以上内容做了个测试：

    css

    clipboard.png

    html

    clipboard.png

    效果图
    clipboard.png

    clipboard.png

    clipboard.png

    **为什么 设置px的单位大小不会随屏幕比例变大而变大，而设置成em或rem的元素可以随页面动态适配大小？
    还有如果不用js去获取屏幕大小去设置根元素的font-size，用媒体查询去做，screen 的范围是写
    min-device-width 还是 min-width 这两个属性是怎么区分的？**

    javascriptrempx2remmedia-query
    阅读 5k
    3 个回答
    得票最新
    头像
    余胖子
      6417

      因为1em=16px不总是对的啊。1em是根据页面中设置的字体的大小。并不是固定的px。

      <style>
    body{font-size:20px;font-family:"微软雅黑";}
</style>
<body>
    <span style="font-size:1em">你好啊</span>
</body>

      修改body中的font-size再看看效果。

      头像
      cc长空
        1.9k1924

        px，css这么定义的，参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角。嘛，反正本来设计为相对单位，却被浏览器当做绝对单位处理；
        至于那两媒体查询，设备宽度（屏幕宽度），另一个（视口宽度），一般用适口宽度；
        另外，可以关注下vw,vh,vm这三个单位，直接与视口相关，多好。

        头像
        林岑影
          5.9k2517

          em和rem是相对单位, 一个是相对父级, 一个是相对html, px是相对像素点.

          所以em和rem都可以根据js动态设置html或者body的字号来改变其他字体, 不过因为em是相对父级, 计算很麻烦, 所以还是推荐用rem

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题