如何实现CSS全屏自适应布局？

全屏自适应的第一步：视口单位

说实话，vw和vh简直是懒人福音。

1vw等于视口宽度的1%，1vh等于视口高度的1%。

所以你把一个盒子宽度写成50vw，它永远占满屏幕一半。

哈哈，这种“所见即所得”让设计稿直接搬进代码。

不过别忘了移动端地址栏会收起又弹出，vh有时会跑偏。

害，遇到这种情况可以改用vmin或者直接用vw来算高度，不忍卒读。。

.fullscreen {
  width: 100vw;
  height: 100vh;
  background: #333;
}

Rem配合JS：稳如老狗的比例尺

咱就是说rem是“以不变应万变”。

核心思路是让根元素的font-size随屏幕变化。

JS一行代码把html根节点的font-size算出来。

然后页面里所有尺寸都用rem写，等比缩放毫无压力。

function setRootFont {
  var w = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = w / 10 + 'px';
}
window.addEventListener;
setRootFont;

不对不对， 记得这段脚本要放在head最前面否则CSS先渲染会出现闪烁。

Rem盒子示例

.rem-box {
  width: 20rem;   /* 假设根字体10px， 则宽200px */
  height: 10rem;
  font-size: 1.6rem;
  background:#ff6b6b;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

Flexbox：一维布局的万能钥匙

Flex最擅长处理导航条、卡片列表这些“一排东西”，等..….。

只要加上display:flex，它就能帮你自动居中、等分空间。

瞎扯。 flex-wrap让元素在空间不足时自动换行，省去手动计算。

.nav {
  display:flex;
  justify-content:center;
  gap:1rem;
}
.nav-item {
  padding:.5rem 1rem;
}

Flex卡片自适应案例

  
A
  
B
  
C

.card-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.card{
   flex:1;
   min-width:200px;
   height:120px;
   background:#45b7d1;
   color:#fff;
   display:flex;
   align-items:center;
   justify-content:center;
}

Grid：二维布局的终极武器

当页面需要一边控制行列时grid登场。

repeat)可以让列数随宽度自动增减，无需媒体查询。

.gallery{
   display:grid;
   grid-template-columns:
     repeat);
   gap:20px;
   padding:20px;
}
.gallery-item{
   background:#4ecdc4;
   color:#fff;
   height:150px;
   display:flex;
   align-items:center;
   justify-content:center;
}

媒体查询：细节调校的防线

虽然vw、 rem、flex、grid已经搞定大框架，但细节总要靠@media来微调，摆烂...。

@media只在满足条件时才生效， 你可以针对手机、平板、超宽屏分别写不同的padding、font-size之类的规则，多损啊！。

/* 手机端 */
@media {
 .container{
    padding:.5rem!important; 
    background:#fafafa; 
 }
 .pc-only{display:none;}
}
/* 平板端 */
@media  and {
 .container{
    padding:1rem; 
 }
}
/* 桌面端 */
@media {
 .container{
    max-width:1200px;margin:auto;padding:2rem; 
 }
}

小技巧：移动优先 vs 桌面优先

何必呢？ 我更喜欢移动优先——先写最小屏幕样式，再用min-width向上覆盖。

这样代码量更少，也更符合现代开发流程。

全屏背景图的完美实现

我悟了。 想要背景图铺满全屏且不变形，background-size属性是关键。

cover会把图片放大到足以覆盖整个容器，超出部分被裁剪但不会拉伸。

.full-bg{
    background:url center/cover no-repeat fixed;
    width:100%;
    height:100vh; /* 占满视口高度 */
}

如果在移动端fixed导致卡顿，可以改为使用绝对定位的或伪元素来模拟固定背景。

Pseudo-element做背景示例

.full-bg::before{
    content:"";
    position:absolute;top:-50%;left:-50%;
    width:200%;height:200%;
    background:url center/cover no-repeat; 
    z-index:-1;transform:scale;
}
body{position:relative;}

实战经验小结——别忘了真机测试！

你我共勉。 # 咱们说实话，大多数坑都是在真机上才暴露出来的。

# 模拟器有时候太宽容，用户设备可是各种奇葩尺寸和系统UI占位不同。

# 所以每写完一个断点， 就去手机上刷一下看文字有没有被遮挡，看按钮够不够大点儿点啊点啊的舒服不舒服。

end of story – 再聊几句心里话吧~

如果你现在还在为页面在4K电视上跑到边缘而抓狂， 那必须的！ 那赶紧把grid+auto-fill整进去试试吧。

AFAIK， 这套组合拳已经能解决90%以上的全屏自适应需求了你再纠结什么媒体查询都可以慢慢加进去。哈哈~

)