CSS 移动端布局适配

最新推荐文章于 2025-02-23 11:08:19 发布

AI_boom

最新推荐文章于 2025-02-23 11:08:19 发布

阅读量274

点赞数

文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/124941526

版权

本文探讨了移动端布局的三种常见策略：Flex响应式布局，实现0适配但可能存在非匀分布局的问题；等比缩放简单易用，但可能导致元素比例控制困难；rem适配通过设置根元素font-size实现灵活尺寸控制，适用于复杂场景。

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

手机屏幕的逻辑像素一般在320px～428px这个范围，手机页面最常见的布局就是水平均分排列和两栏布局。

Flex响应式布局，0适配

科学使用CSS布局，写出来的内容就是适配的。缺点

设计师一般只有一稿，导致在其他大小的屏幕上没有标准设计；
某些屏幕上样式出现问题需要实际检测出来后再微调；
对于一些非匀分排列和两栏布局的设计风格就无能为力了

等比缩放

屏幕布局、大小固定，在不同设备上进行缩放

 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >

// 需要在script写上适配的修改viewport的代码才行
 <script> const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      } 
      meta.setAttribute('content', content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter </script>

上面使用到了html5屏幕旋转事件： window.onorientationchange

window.orientation属性与onorientationchange事件  
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
window.onorientationchange = orientationChange;   //写上对应的函数地址，屏幕旋转后会触发

优缺点： 优点：开发流程很简单，工程师只需根据设计稿标注还原页面，不需要额外计算。适配范围广。缺点：页面整体放大缩小，对于不想缩放的元素无法控制。比如边框在大屏手机下显得很粗，在小屏手机下显得很细。

rem适配

设置根元素的font-size大小为屏幕宽度/设计稿宽度，其他需要用到尺寸的地方都rem

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script> const WIDTH = 750  //如果是尺寸的设计稿在这里修改
    const setView = () => {
      //设置html标签的fontSize
      document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView() </script>
  
  <style> div {
      width: 3.75rem; /* 需要随屏幕等比缩放，使用rem单位，比如设计稿中标注的32px这里写成0.32rem */
      border: 1px solid #ccc; /*不需要缩放的部分用px*/
    } </style>
</head>
<body>
  <div>内容</div>
</body>
</html>

参考：移动端适配viewport缩放方案 html5屏幕旋转事件 onorientationchange