vue实现自适应
Vue实现自适应的方法
使用CSS媒体查询
在Vue项目中，可以通过CSS媒体查询实现自适应布局。在组件的<style>标签中定义不同屏幕尺寸下的样式规则。
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.container {
width: 80%;
}
}
@media screen and (min-width: 1025px) {
.container {
width: 60%;
}
}使用flexible.js
flexible.js是淘宝团队开发的移动端自适应解决方案，能根据设备屏幕的DPR动态调整rem值。
安装flexible.js：
npm install lib-flexible --save在main.js中引入：
import 'lib-flexible'配置postcss-pxtorem：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75,
propList: ['*']
}
}
}使用Vue响应式属性
利用Vue的响应式特性，根据窗口大小动态调整布局。
export default {
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth
}
},
computed: {
isMobile() {
return this.windowWidth < 768
}
}
}使用第三方UI库
许多Vue UI库如Element UI、Vant等都内置了响应式支持。
以Vant为例：
import { Col, Row } from 'vant'
export default {
components: {
[Col.name]: Col,
[Row.name]: Row
}
}模板中使用：
<van-row>
<van-col span="24" :md="12" :lg="8">内容</van-col>
</van-row>使用CSS Grid布局
CSS Grid布局是现代浏览器支持的强大布局系统，可以轻松实现复杂响应式布局。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}图片自适应处理
对于图片响应式处理，可以使用srcset属性或picture元素。
<img
:src="imageSrc"
:srcset="`${imageSmall} 480w, ${imageMedium} 768w, ${imageLarge} 1200w`"
sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px"
alt="响应式图片"
>使用VueUse的useBreakpoints
VueUse提供了useBreakpoints组合式API，可以更方便地处理响应式逻辑。
安装VueUse：
npm install @vueuse/core使用示例：
import { useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints({
mobile: 640,
tablet: 768,
laptop: 1024,
desktop: 1280
})
const isMobile = breakpoints.smaller('tablet')
const isDesktop = breakpoints.greater('laptop')
