响应式布局小实践 --Rem 和媒体查询

响应式布局小实践 –Rem 和媒体查询

前言：下午捣鼓了下，看了很多解决移动端自适应的方案，大多以 Rem 和媒体查询作为主流解决方案。另外 CSS3 的 flex 和 Grid 也是不戳的布局解决方案。

01 ✔️Rem / 媒体查询

通俗一点说，Rem 是根据 <Html> 样式的 font-size 来计算相对大小的，比如说，<Html> 的 font-size=16px(默认)，那么就是相当于 1rem=16px 。当然<Html>的font-size是可以自行设置的。

**媒体查询**，具体可以看下官方文档，这边主要讲下它的常规使用。

1
2
3
4
5
// 常见设备的媒体查询
@media screen and (max-width: 1160px)
@media screen and (max-width: 820px)ipad Air
@media screen and (max-width: 768px)ipad mini
@media screen and (max-width: 390px)iphone 12pro

02 ✔️ 实践

思路：

  1. 在响应式布局中，必须通过js来动态控制根元素font-size的大小。( 用户设备宽度 / 设计稿标准宽度 ) * 100

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 这边封装成一个 hook
    import { useCallback, useEffect } from 'react'

    export default function useMobileRem() {
      const inMobile = useCallback(() => {
        document.getElementsByTagName('html')[0].style.fontSize =
          (document.documentElement.clientWidth / 1920) * 100 + 'px'
      }, [])

      useEffect(() => {
        document.addEventListener('DOMContentLoaded', inMobile)
        window.onresize = inMobile
        return () => {
          document.removeEventListener('DOMContentLoaded', inMobile)
        }
      }, [inMobile])
    }

  2. 通过媒体查询的方式，若当前设备宽度小于某个值时，采用rem单位的布局。

1
2
// 根据产品需求，去编写不同屏幕的样式
@media (min-width: 30em) and (max-width: 50em) { ... }

03 FAQ

❓：px、rem 和 em 的区别？

💻：px是固定的像素，是相对于显示器屏幕分辨率而言的。em、rem 对于 px 更具有灵活性，他们是相对长度单位，em 是相对于父元素的单位，rem (root em )是相对根元素的长度。

移动端兼容
Rem

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！