移动端适配

原创 已于 2022-11-14 11:28:24 修改 · 156 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#postcss #webpack #vue.js

于 2022-05-14 17:33:35 首次发布
本文介绍了如何通过执行`npm run eject`来暴露webpack配置，并详细讲解了安装`postcss-loader`和`postcss-px-to-viewport`插件的过程。在配置文件中，你需要找到并修改`postcss-normalize`的位置，添加转换规则，包括设置视口宽度、单位精度等参数，确保px单位在媒体查询中也能被转换。

先执行npm run eject 来暴露配置文件

  • 需要注意的是如果run eject确保你当前项目的git没有待缓存的文件(一定要commit完
    )

安装以下依赖

npm install postcss-loader --save
npm install postcss-px-to-viewport --save

在config/webpack.config.js 搜索 ‘postcss-normalize’

require('postcss-px-to-viewport')({
  viewportWidth: 1920, // (Number) The width of the viewport.
  unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
  viewportUnit: "vw", // (String) Expected units.
  selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
  minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
  mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
1-07 React配置postcss-px-to-viewport
Bunny的博客
10-24 1028
之后当我们写px时会自动转换成vm单位。
vue3 postcss-px-to-viewport 页面自适应
wxid_mtnujb6ipc0322的博客
11-02 5146
postcss-px-to-viewport 是一个 PostCSS 插件，它可以将 px 单位转换为视口单位（vw、vh 或 vmin）。视口单位是相对于视口尺寸来计算的长度单位，而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时，元素会随着屏幕尺寸的变化而自适应。
postcss-px-to-viewport 适配 uniapp
熊宗的博客
11-09 3650
参考：https://uniapp.dcloud.io/component/page-meta?id=page-meta module.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ unitToConv
react 使用 postcss-px-to-viewport
zywpurple的博客
10-16 3552
自动将px转化为vw 1、安装依赖 npm install postcss-loader --save npm install postcss-px-to-viewport --save 2、修改webpack.config.js配置文件 假如这段代码 require('postcss-px-to-viewport')({ viewportWidth: 1920, // (Number) The width of the viewport. viewportHeight: 1080, // (Nu
react 使用 postcss-px-to-viewport 实现 px 自动转 vw 自适应
Vivien_CC的博客
06-13 491
摘要：本文介绍了在React+Next.js项目中实现全屏自适应布局的解决方案。通过使用postcss-px-to-viewport插件，将px单位自动转换为vw视口单位，确保页面在不同屏幕尺寸下都能完整显示且不出现滚动条。文章详细说明了插件的安装步骤、postcss配置文件设置以及必要的Next.js配置修改，最终实现了完美的响应式布局效果。
vue3移动端适配的解决方案（老方案）
12-01
Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...
详解基于Vue/React项目的移动端适配方案
10-16
随着智能手机的普及，移动端适配已经成为前端开发工作中的重要组成部分。移动设备拥有多种屏幕尺寸和分辨率，为了保证网页在不同设备上能够有良好的显示效果，开发者需要采用相应的适配方案。在前端技术栈中，Vue和...
手淘解决移动端适配问题（flexible）
09-27
在移动互联网快速发展的今天，移动端适配已经成为网页设计和开发中的关键问题。"手淘解决移动端适配问题（flexible）"的方案是阿里巴巴手淘团队提出的一种高效、灵活的移动端适配策略，旨在帮助开发者解决不同设备...
前端开源库-postcss-px-to-viewport
08-29
前端开源库-postcss-px-to-viewportpostss px to viewport，一种将px转换为viewport单位（vw、vh、vmin、vmax）的CSS后置处理器。
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; border : 3 px solid black; border-bottom-width : 1 px ; font-size : 14 px ; line-height : 20 px ; } . class2 { padding-top : 10 px ; /* px-to-viewport-ignore */ /* px-to-viewport-ignore-next */ padding-bottom : 10 px ;
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw
刻痕
01-14 7786
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw
如何进行各个终端的页面适配(react项目安装插件 postcss-px-to-viewport)
qq_52181663的博客
11-17 1246
2、在webpack的配置文件中（webpack.config.js），引入这个插件，并进行配置。1、先安装这个插件 这个插件会自动将样式文件中的 px 转换为 vw。（2）、再进行配置 在 getStyleLoaders（）中配置。一般我们都是按着UI稿的尺寸来写固定的px 这个习惯。插件是 postcss-px-to-viewport。在上例的配置中，页面的参考宽高为 750 1624。我们可以引用插件来做。（以reactApp为例）这个可以根据设计稿的宽高来，这样方便！
Vite配置postcss-px-to-viewport
walaw11的博客
04-14 743
【代码】Vite配置postcss-px-to-viewport。
vue移动端布局适配方案之postcss-px-to-viewport
工作是水，生活是酒，水会决定酒的品质，但生活要过得像酒一样，不能像水一样没有味道
02-21 3579
在项目中本地开发时使用px，但是界面上线以后，样式需要根据视口大小来调整宽度，我们可以用viewport单位，现在viewport单位越来越受到众多浏览器的支持。它可以将CSS中的px单位转化为视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%（1vw等于1/100视口宽度），即window.innerWidth。
React移动端适配
Y_X_gang的博客
08-25 2665
react移动端适配配置配置webpack引入配置文件更改代码后在入口文件中配置完成 为了让我们的项目，在不同的设备下任然可以正常访问，我们通常使用rem来做适配 rem（font size of the root element），简单的来说，它是一个相对单位，相对于根元素font-size来计算，比如：font-size: 10px, 那么1rem = 10px 看似换算如此简单，但是，ui一般出图，都是按照某一种设备的尺寸比例出图，例如iphone6（屏幕宽度：375px），如此以来，则存在着
Vue 93 ，前端自适应布局：使用 postcss-px-to-viewport 实现网页适配，PC端网页适配（ px转vw，postcss.config.js文件配置 ）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
02-19 3158
⭐在当今的前端开发中，网页需要在各种不同尺寸的设备上完美显示，这就要求我们采用有效的自适应布局方案。postcss-px-to-viewport 是一个强大的 PostCSS 插件，它可以帮助我们将 CSS 中的 px 单位自动转换为视口单位（如 vw），从而实现网页的自适应布局。这里来详细介绍下如何使用 postcss-px-to-viewport 插件，并结合 Vue 项目进行实际操作。
react移动端适配之vw适配 postcss-px-to-viewport插件
qq_43287934的博客
10-15 1771
react 适配移动端
react移动端适配
weixin_42478537的博客
07-04 2585
react移动端适配
移动端适配原理
最新发布
09-05
<think> 首先，用户的问题是：“我想了解移动端适配的原理 请问移动端适配的原理”。系统指令要求我使用中文回答，结构清晰，逐步解决问题，并保证回答真实可靠。 我需要参考提供的引用内容。这些引用是关于移动端适配原理的： - [^1] 讨论了移动端适配的原因和一些概念。 - [^2] 解释了rem布局原理，涉及rem单位基于html的font-size。 - [^3] 强调适配的目的是让设计稿在不同设备上表现一致。 - [^4] 提到物理像素、逻辑像素，以及网易和淘宝的方案。 - [^5] 讨论了使用media query或data-dpr来处理字号大小。 用户的问题焦点是“移动端适配的原理”，所以我需要整理这些原理的核心点。 关键原理点： 1. **适配的必要性**：不同设备有不同屏幕尺寸、分辨率和像素密度（DPI），需要确保网页在各种设备上显示一致。 2. **viewport设置**：在HTML的meta标签中设置viewport来控制页面的缩放和尺寸，如：`<meta name="viewport" content="width=device-width, initial-scale=1.0">`。这使得页面宽度等于设备宽度。 3. **单位系统**：使用相对单位来实现适配。 - **rem单位**：rem基于根元素（html）的font-size。开发者设置html的font-size为设备宽度的某个比例，然后所有尺寸用rem表示。这样当设备宽度变化时，元素尺寸自动缩放。 - 例如，设计稿宽度750px，设置html font-size为750/10 = 75px（假设10rem为设计稿宽度）。那么一个100px宽的元素在CSS中写为100/75 ≈ 1.333rem。 - **vw/vh单位**：视口宽度/高度单位。1vw = 1%视口宽度。可以直接使用vw来定义尺寸，避免依赖rem。 4. **像素密度处理**：物理像素和逻辑像素（CSS像素）的区别。高DPI设备有更多物理像素，但CSS像素基于逻辑像素。有时需要处理不同DPI，如使用data-dpr属性来调整文本大小。 5. **常见方案**： - **网易方案**：基于rem，动态计算html的font-size。 - **淘宝方案（Flexible）**：类似，但更完整，处理了高清屏和dpr。 6. **实现方式**： - 使用JavaScript在页面加载时动态设置html的font-size，基于设备宽度。 - 或者使用CSS媒体查询（media queries）来根据不同宽度设置样式。 回答结构应该清晰： 1. **介绍适配的必要性**：解释为什么需要移动端适配。 2. **核心原理**：详细说明viewport、相对单位（尤其是rem）、和动态计算。 3. **常见实现方案**：简述网易和淘宝的方法。 4. **总结原理**：强调基于相对单位和动态计算。 系统指令还要求生成相关问题，所以我需要在回答末尾添加相关问题。 此外，回答中引用的段落末尾自然地添加引用标识，如[^1]、[^2]等。所以我需要正确引用这些来源。 最后，系统指令要求使用$...$和$$...$$格式处理数学表达式，但这里可能没有复杂的数学，主要是单位解释。 现在，构建回答： - 开头：重申问题，说明适配原理。 - 主体：分步骤解释原理。 - 结尾：总结，并添加相关问题。 生成相关问题： 1. rem单位和em单位有什么区别？ 2. 如何实现动态rem适配？ 3. 移动端适配中如何处理高清屏（Retina屏幕）？ 4. viewport设置的具体作用是什么？ 确保回答真实可靠：基于提供的引用内容。 </think> ### 移动端适配的原理 移动端适配的核心原理是确保网页在不同设备（如手机、平板）上具有一致的视觉表现和用户体验。由于不同设备的屏幕尺寸、分辨率和像素密度（DPI）差异巨大，适配的目标是将设计稿（通常是固定宽度，如750px）灵活地映射到各种屏幕上。这主要通过相对单位、动态计算和视口控制实现。下面我将逐步解释关键原理，以确保回答清晰可靠。 #### 1. **适配的必要性：设备多样性与像素密度** - 不同设备（如iPhone 12与Android手机）的物理像素（硬件像素点）和逻辑像素（CSS像素）不一致。例如，一个750px的设计稿在高DPI设备（如Retina屏幕）上可能被渲染为更多物理像素，导致元素过小或过大。 - **物理像素与逻辑像素**：物理像素是设备的实际像素点，逻辑像素是CSS使用的像素单位。高DPI设备（dpr > 1）会将一个逻辑像素映射到多个物理像素上。适配的目的是让设计稿在任何设备上都保持比例一致[^3][^4]。 - 适配确保文本、图像和布局都能自适应缩放，避免出现滚动或溢出问题。 #### 2. **核心原理：相对单位与动态计算** 移动端适配的核心是使用相对单位而非固定单位（如px），并通过动态计算实现缩放。主要方法包括： - **viewport设置**：在HTML的`<head>`中添加meta标签控制视口： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` - `width=device-width`：强制页面宽度等于设备逻辑宽度（如iPhone的逻辑宽度为375px）。 - `initial-scale=1.0`：禁止用户缩放，确保初始缩放比例为1:1。这解决了设备宽度不一致的问题[^4][^3]。 - **rem单位布局原理**： - rem（root em）基于根元素（html）的font-size。所有尺寸（如width、height）使用rem单位，这样当html的font-size变化时，元素尺寸自动缩放。 - **动态计算font-size**：通过JavaScript在页面加载时设置html的font-size为设备宽度的比例。例如： - 设计稿宽度750px，设置html font-size = 设备宽度 / (750 / 基准值)。基准值常设为10（便于计算）。 - 公式：$$ \text{html font-size} = \frac{\text{deviceWidth}}{\text{设计稿宽度} \times \text{基准值比例}} \times \text{基准值} $$ - 假设设备宽度375px（标准iPhone），设计稿750px，设定1rem = 100px（基准值），则html font-size = 375 / 7.5 = 50px。元素在设计稿中100px宽时，CSS写为$1rem$（因为100px / 100 = 1rem）。在375px设备上，实际渲染为50px * 1rem = 50px，保持比例一致[^2][^4]。 - 示例：设计稿元素高度100px，在750px设备下，1rem = 750/10 = 75px，元素高度为$100 / 75 \approx 1.333rem$。在375px设备下，1rem = 375/10 = 37.5px，元素高度为$1.333 \times 37.5 \approx 50px$，比例不变[^2]。 - **vw/vh单位**：视口宽高单位（1vw = 1%视口宽度），可直接用于CSS。例如，设计稿元素100px宽，视口宽度750px时，元素设为$100 / 750 \times 100vw \approx 13.333vw$。这避免了JavaScript动态计算，但兼容性略差于rem[^2]。 #### 3. **处理像素密度和文本大小** - 高DPI设备（dpr > 1）需要额外处理文本和图像清晰度： - **data-dpr属性**：如淘宝方案，在html标签添加data-dpr属性（如`<html data-dpr="2">`），然后通过CSS媒体查询调整文本大小： ```css .text { font-size: 12px; } [data-dpr="2"] .text { font-size: 24px; } /* dpr=2时放大文本 */ ``` 这确保文本在高清屏上不模糊[^5]。 - **图像适配**：使用SVG图标或`srcset`属性为不同dpr提供多倍图，优化显示效果。 #### 4. **常见实现方案** - **网易方案**：基于rem，通过JavaScript计算html font-size。计算公式：$$ \text{font-size} = \frac{\text{deviceWidth}}{7.5} $$（适合750px设计稿）。优点是简单高效[^4]。 - **淘宝方案（Flexible）**：结合rem和viewport缩放，动态设置dpr和font-size。处理高DPI更全面，适合复杂场景。例如，设置viewport的scale=1/dpr，避免缩放失真[^4][^5]。 - **媒体查询（Media Queries）**：CSS方案，根据不同屏幕宽度设置font-size。例如： ```css @media (min-width: 375px) { html { font-size: 37.5px; } } /* iPhone适配 */ ``` 但不如JavaScript灵活，适合简单页面[^5]。 #### 总结 移动端适配的原理本质是通过相对单位（rem/vw）和动态计算（JavaScript或CSS），将设计稿的固定尺寸映射到不同设备逻辑宽度上，同时处理像素密度以实现一致性。viewport控制基础缩放，rem/vw实现弹性布局，data-dpr优化高清显示。这是一种成本低、效果好的方案，确保用户体验统一[^1][^3][^4]。 相关问题： 1. rem单位和em单位在移动端适配中有什么区别？ 2. 如何用JavaScript实现动态rem适配？ 3. 移动端适配中如何处理Retina屏幕的高清显示问题？ 4. viewport的initial-scale属性具体如何影响页面缩放？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Raccom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值