PC端页面适配rem.js
时间: 2024-02-02 17:04:19 浏览: 23
如果你不想手动计算rem的数值,可以使用rem.js来实现PC端页面适配。rem.js是一个JavaScript库,它会根据浏览器窗口大小自动计算出合适的rem值,并将其应用到页面元素。
使用rem.js的步骤如下:
1. 在页面的head标签中引入rem.js的文件。
```html
<script src="path/to/rem.js"></script>
```
2. 在CSS文件中设置元素的尺寸时,使用rem作为单位。
3. 在CSS文件中设置html的font-size为10px(或其他数值),这个数值是基准值,可以根据设计师的要求自行设置。
4. 在rem.js中设置基准值,即设置1rem等于多少像素。
```javascript
window.rootFontSize = 100; // 1rem = 100px
```
5. 通过以上步骤,rem.js会根据浏览器窗口大小自动计算出合适的rem值,并将其应用到页面元素。
使用rem.js可以方便地实现PC端页面的适配,但需要注意的是,在使用rem.js时,需要保证页面中引入的CSS文件中,所有尺寸的单位都是rem,否则会导致适配失败。
相关问题
px2rem pc端适配完整代码
这是一个简单的px2rem的代码示例,可用于PC端适配:
```javascript
// 设置rem基准值
function setRem() {
var width = document.documentElement.clientWidth; // 获取窗口宽度
var baseSize = 100; // 这里设置的是基准字体大小,可以根据设计稿调整
var scale = width / 1920; // 1920是设计稿的宽度,可以根据实际情况调整
var remSize = baseSize * scale; // 计算rem字体大小
document.documentElement.style.fontSize = remSize + 'px'; // 设置根元素的字体大小
}
// 监听窗口变化
window.addEventListener('resize', function () {
setRem();
});
// 初始化
setRem();
```
在这个代码示例中,我们首先定义了一个`setRem`函数,用于设置根元素的`fontSize`。在函数中,我们获取了窗口的宽度,然后计算出了基准字体大小和缩放比例。最后,我们将根元素的`fontSize`设置为计算出的rem字体大小。
我们还在`window`对象上添加了一个`resize`事件监听器,以便在窗口大小发生变化时重新计算并设置根元素的`fontSize`。
最后,我们在页面加载时调用一次`setRem`函数,以确保初始状态下根元素的`fontSize`已正确设置。
vue pc端项目适配移动端
要将Vue PC端项目适配为移动端,可以使用以下步骤:
1. 首先,在开发环境中安装postcss-px-to-viewport插件。可以通过以下命令进行安装:`npm install postcss-px-to-viewport --save-dev`。这个插件可以帮助将像素单位转换为视口单位,实现移动端适配。
2. 在项目根目录中添加postcss.config.js配置文件。可以在配置文件中设置插件的相关参数,如需要转换的单位、设计稿的视口宽度、单位转换后保留的精度等。配置如下:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 1920,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 1920
}
}
};
```
这个配置会将指定的CSS属性值转换为vw单位,从而实现移动端适配。
3. 在Vue项目的main.js文件中引入lib-flexible库。可以通过以下代码进行引入:`import 'amfe-flexible';`。这个库可以自动设置页面的根字体大小,以适应不同设备的屏幕尺寸。
4. 在vue.config.js文件中配置postcss-pxtorem插件,用于将像素单位转换为rem单位。可以按照以下配置进行设置:
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
}
}
},
};
```
这个配置会将像素单位转换为rem单位,其中rootValue设置为37.5可以方便地将设计稿的像素值转换为rem值。
通过以上步骤,你的Vue PC端项目就可以适配移动端了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue移动端 / PC端适配解决方案](https://blog.csdn.net/weixin_48862362/article/details/121518364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [手把手教你实现VuePC端,移动端适配](https://blog.csdn.net/Orange71234/article/details/131329898)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]