学习任务

    制作完成环博会移动端网页，如图所示。

学习目标

1.理解物理像素、逻辑像素、设备像素比（DPR）

2.掌握viewport 视口配置方法

3.熟练使用rem、vw适配方案

学会 Flex 布局在移动端的基础应用

学习要点

1.视口    

参数说明

width=device-width：视口宽度 = 设备宽度

initial-scale=1.0：初始缩放 1 倍

user-scalable=no：禁止用户缩放

2. 移动端适配单位

px：固定单位，适合边框、小图标

rem：相对根元素 font-size，1rem = 根字号

vw：视口宽度 1%，100vw = 设备宽度

3. 屏幕基础概念

物理像素：屏幕硬件最小发光单元，出厂固定

逻辑像素（CSS 像素）：Web 开发使用的抽象单位

设备像素比（DPR）：DPR = 物理像素 / 逻辑像素

4. 适配方案

rem 适配：配合 flexible.js 动态设置根字号

vw 适配：直接用 vw 单位，无需 JS，更简洁

Flex 布局：移动端主流布局方式

参考代码

   1.html部分

<!-- 功能入口 -->

<div class="features-section">

<div class="features-grid">

<div class="feature-item">

<div class="feature-icon cyan">

<i class="fas fa-book"></i>

</div>

<span class="feature-name">电子会刊</span>

</div>

<div class="feature-item">

<div class="feature-icon teal">

<i class="fas fa-cube"></i>

</div>

<span class="feature-name">展品一览</span>

</div>

<div class="feature-item">

<div class="feature-icon orange">

<i class="fas fa-users"></i>

</div>

<span class="feature-name">展商名录</span>

</div>

<div class="feature-item">

<div class="feature-icon brown">

<i class="fas fa-gift"></i>

</div>

<span class="feature-name">同期活动</span>

</div>

<div class="feature-item">

<div class="feature-icon blue">

<i class="fas fa-th-large"></i>

</div>

<span class="feature-name">交通指南</span>

</div>

<div class="feature-item">

<div class="feature-icon green">

<i class="fas fa-newspaper"></i>

</div>

<span class="feature-name">展会新闻</span>

</div>

<div class="feature-item">

<div class="feature-icon purple">

<i class="fas fa-map"></i>

</div>

<span class="feature-name">展位图</span>

</div>

<div class="feature-item">

<div class="feature-icon orange">

<i class="fas fa-map"></i>

</div>

<span class="feature-name">热门展品</span>

</div>

</div>

</div>

2.css代码

/* ===== 功能入口 ===== */

 .features-section {

  background: #fff;

  padding: 4.65vw 0;

 }

 .features-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2.33vw 0;

  padding: 0 3.49vw;

 }

 .feature-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  transition: transform 0.2s;

  padding: 1.16vw 0;

-webkit-tap-highlight-color: transparent; /* 移除默认点击高亮*/

 }

 .feature-item:active {

  transform: scale(0.92);

touch-action: manipulation;/*移除了移动端的点击延迟*/

 }

 .feature-icon {

  width: 14.88vw;

  height: 14.88vw;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 6.98vw;

  color: #fff;

  margin-bottom: 2.33vw;

  transition: all 0.2s;

 }

 .feature-icon.cyan {

  background: linear-gradient(135deg, #6dd5c7, #5bc0be);

 }

 .feature-icon.teal {

  background: linear-gradient(135deg, #5bc0be, #4a9b9b);

 }

 .feature-icon.orange {

  background: linear-gradient(135deg, #f5b041, #e67e22);

 }

 .feature-icon.brown {

  background: linear-gradient(135deg, #d4a373, #c49463);

 }

 .feature-icon.blue {

  background: linear-gradient(135deg, #5dade2, #3498db);

 }

 .feature-icon.green {

  background: linear-gradient(135deg, #6cc070, #27ae60);

 }

 .feature-icon.purple {

  background: linear-gradient(135deg, #bb8fce, #9b59b6);

 }

 .feature-name {

  font-size: 3.49vw;

  color: var(--text-primary);

  font-weight: 400;

 }