使用媒体查询结合蓝湖 750 设计稿来进行移动端适配（从 PC 代码基础上修改）的大致步骤和要点一、基础设置和准备在

一、基础设置和准备

在 CSS 开头重置一些基础样式（确保在移动端显示一致性），比如：

body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

设置视口相关（如果原来没有的话）在 HTML 的 <head> 中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

二、媒体查询部分

计算基准
假设你希望在移动端 750px 设计稿下，html 的默认字体大小为 16px（和通常浏览器 PC 端默认字体大小一致以便计算），那么可以这样写媒体查询：

@media screen and (max-width: 750px) {
    html {
        font-size: 16px;
    }
}

如果想调整整体在移动端的缩放比例等，可以改变这个 font-size 大小。

元素尺寸转换
以一个宽度在设计稿上为 300px 的元素为例，在媒体查询内其对应的移动端 CSS 写成：

@media screen and (max-width: 750px) {
 .example-element {
    width: 0.4rem;  // 300 / 750 = 0.4 （rem 相对于 html 字体大小）
    height: 相应换算的高度;
    padding: 相应换算的内边距;
    margin: 相应换算的外边距;
  }
}

可以根据不同的移动端屏幕尺寸断点进一步细化

@media screen and (max-width: 480px) {
  // 小屏幕手机（小于等于480px宽度）特殊样式
 .example-element {
    width: 0.3rem;
  }
}

@media screen and (min-width: 481px) and (max-width: 600px) {
  // 中等屏幕手机（481 - 600px 宽度）特殊样式
 .example-element {
    width: 0.35rem;
  }
}

三、字体相关（如果有字体大小要适配）

@media screen and (max-width: 750px) {
  h1 {
    font-size: 1.5rem;  // 假设在设计稿上原本是 24px ，相对于 16px 字体大小html 换算为 1.5rem
  }
  p {
    font-size: 0.8rem;
  }
}

四、图片相关（如果需要）

对于背景图片等，如果要适配移动端，可根据不同屏幕大小提供不同图片资源（利用媒体查询）或者设置背景图片的 background-size 等属性来确保显示合理。
对于一些图标等，可以考虑使用 SVG 格式（矢量图形）来更好地适配不同分辨率移动端。

五、布局调整（如果需要）

对于 PC 端的一些固定宽度布局在移动端要改为相对布局（比如 flex 布局等）

@media screen and (max-width: 750px) {
 .container {
    display: flex;
    flex-direction: column;  // 例如从水平排列改为垂直排列
  }
}

对于 PC 端的大的外边距和内边距在移动端可能需要适当减小等。

六、交互相关（如果有交互代码）

例如一些 PC 端的鼠标悬停事件在移动端可能要改为触摸事件等，需要在 JavaScript 代码中使用相应移动端的事件处理。

七、测试和优化

在各种不同尺寸的移动设备模拟器（如浏览器开发者工具模拟不同手机）以及真机上进行测试。
检查页面的显示效果、布局、交互等是否合理，根据测试结果不断优化媒体查询的断点和相应的样式规则等。