pc端和移动端自适应, 做响应式网页

article/2025/9/22 9:29:51

一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页

响应式和自适应的区别：

响应式是一套代码通过检测视口分辨率展示不同的页面布局效果样式，是指据屏幕的大小自动的调整页面的展现方式，可以实现用一个网页自动适应不同大小的屏幕，页面内容一样布局效果改变。

自适应布局是需要做多套页面，由服务端（根据用户代理）选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率，为不同设备提供不同版本的网站（网页）。

在开发中要想实现项目的响应式，建议使用媒体查询，在不同的宽度下显示不同的样式，1920下就是pc端的响应式，宽度设置的足够小可以匹配移动端的响应式

移动端适配响应式：rem + flexible / vw

rem: 1rem = 1HTML字号大小

移动端的适配可以使用rem相对长度单位，让页面的布局在不同的设备下可以达到最完美的效果，可以根据根标签字号大小计算rem数值，页面就可以在不同的设备宽度下显示不一样的大小，从而达到适配效果了。

标签根字号的大小一般是根据手机设备宽度的1/10来计算的，如果设备宽是375px大小，那么设置相应的根字号大小就是font-size:37.5px;

@media(width:375px){html{font-size:37.5px}
}

实际开发中，我们怎么控制根字号的大小从而动态计算rem数值呢，一个一个写媒体查询太麻烦了,这时可以使用淘宝开发的一套工具，flexible.js框架进行适配，其实就是个js文件写好了媒体查询代码，核心原理就是根据不同的视口宽度，给 html标签加不同的font-size字体大小

下载： npm i -s lib-c

main.js引入： import 'lib-flexible/flexible.js'

config里面进行flexible的配置

页面就可以直接rem单位了。

 postcss-pxtorem({rootValue: 32,// 设计稿宽度的1/10propList: ["*"],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部selectorBlackList: [".mint-"]
})

vw： 1vw = 3.75px

vw和vh是未来的解决移动端适配的解决方案，也是属于相对单位，使用起来不像rem那么复杂需要引入第三方工具，页面直接使用即可，不过，vw是相对于视口宽度的1%计算长度的,

比如视口宽度是375px，1vw = 3.75px

vw单位尺寸 = 设计稿的px单位数值 / 1%视口宽度

pxtoviewport({ // postcss-px-to-viewport,将px单位转换为视口单位的PostCSS 插件.viewportWidth: 375  //viewportWidth视口端口宽度
})

百分比是没有办法完成移动适配的，因为百分比宽可以自适应，高度是固定的没有办法自适应的

pc端响应式：

媒体查询

书写顺序：max-width（从大到小）1200 992 768 min-width（从小到大）768 992 1200

能够根据设备宽度的变化，设置差异化样式，保持页面的完整性和美观性

media写法

@media(max-width:1200px){.box{display:none}body{background-color:tomato}
}

link写法：

<link rel="stylesheet" href="./home/css" media="(max-width:1200)">

一般前端框架像bootstrap框架专门提供响应式布局的，element，vant也是自带响应式布局。

一位朋友说我上面响应式和自适应的区别写反了，我仔细考虑了下没有写反，但还是感觉说法有点模糊不够全面做了纠正，于是乎，今天又多方搜集了资料，整理了一套自己的理解和解决方案的对比，其实响应式大范围上来说是覆盖了自适应的，只是在实现的技术行有不一样的区别，如果下面的解释能给你带来更准确的理解那就更好了。

响应式是前端工作，同一个地址，一套代码在不同端（比如pc端和手机端）页面内容一样展现不同的布局方式，（参考掘金网站）掘金的布局就是响应式，这里可点击掘金网站做对比，在F12调试工具下打开浏览器开发者工具的移动端模拟器刷新网站，和桌面端对比，会发现，页面内容基本一样，布局发生了变化。

自适应是多套代码在不同的设备上呈现完全不同的布局方式，页面内容也有所改变，自适应可以说是后端工作，是因为一般来说，自适应是需要多个版本的网页的，比如就是移动端一套，桌面设备一套，服务器收到用户请求后，会根据HTTP请求中的UA（User-Agent是一个特殊的字符串头，使得服务端能够识别客户使用的操作系统及版本，cpu类型，浏览器及版本，浏览器渲染引擎，浏览器语言插件等等）头判断设备类型，选择部署合适的网站版本。 （参考京东网站 ) ,在不同端下网站的地址也发生了变化，京东这种大型复杂网站使用的方式，网站的不同版本会发布到不同域名。最常见的是使用xxx.com和m.xxx.com域名。如果服务器判断出用户代理是移动端，则重定向到m.xxx.com域名（可打开京东网站用F12移动调试工具以便于更好的理解）