Vue移动端适配方案.md

移动端主要采用rem布局,vue+webpack,通过webpack编译,将css中px自动转成rem或其它单位,这里采用px2rem-loader进行转换,最后引入lib-flexible,实现不同设备不同分辨率的弹性适配。

实现步骤

第一步:引入lib-flexible

# 下载lib-flexible
npm i lib-flexible --save

# 在vue入口main.js导入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘@/router‘
import ‘lib-flexible/flexible‘

Vue.config.productionTip = false

import ‘@/assets/global.less‘

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

第二步:引入px2rem-loader

# 下载px2rem-loader
npm install px2rem-loader --save-dev

# utils.js中配置loader
const px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUnit: 75
    }
  }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

支持less

引入less-loader

npm install less less-loader --save-dev


注:以上方案,只能转换vue文件中style里的css,对于内联样式无能为力。内联样式以及组件间传参的css,只好另外想办法,可以重写loader,通过正则匹配后进行转换。

<template>
  <div class="template-view">

  </div>
</template>

<script>
export default {
  name: ‘template‘,
  components: {},
  data () {},
  methods: {}
}
</script>

<style scoped>
</style>

原文地址:https://www.cnblogs.com/vipinchan/p/9733710.html

时间: 2024-11-04 08:29:14

Vue移动端适配方案.md的相关文章

rem移动端适配方案

一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准 二.js计算 为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面. <script> const oHtml = document.getElementsByTagName(

移动端适配方案

Flexible适配方案 最早的文章,是15年阿里手淘团队的移动端适配方案. 设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变). 前端开发人员通过一套适配规则自动适配到其他的尺寸. 先了解一些基本概念 视窗viewport 简单理解,viewport是严格等于浏览器的窗口,在桌面浏览器中,viewport就是浏览器窗口的宽度高度. 但是在移动端的viewport太窄,为了能更好的为css布局服务,所以提供了两个vie

移动端适配方案研究

初次接触移动端的时候,以为终于可以不用像pc那样考虑令人头疼的ie浏览器兼容问题,有强大的css3的帮助,可以随心所欲..可是后来才发现原来移动端各种层次不齐的终端更会让人抓耳挠腮,同样的页面在不同的手机上显示的完全不一样的效果,于是抛开功能,页面适配性也成了一个大的课题. 说到移动端,下面这一行代码大家一定不陌生: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s

h5移动端适配方案

flex布局 flex布局,不使用rem,直接使用px. <!DOCTYPE html> <html> <head> <title></title> <style> /*利用flex属性,可以实现块级元素1:1:1*/ /*简单的就能使里面的内容居中(尤其是垂直居中,好用到爆)*/ .box{ display: flex;width: 50px;height: 30px; /*默认 row*/ flex-direction:colum

html移动端适配方案rem

为了做到一次开发的网页能够在不同尺寸的移动端设备上适配,我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸. 比如设计稿是按照 IPhone6 的 750px 像素设计的,设计稿上的头部导航条的高度是75px. 那么在 IPhone6 的手机上导航条显示的高度就是75px,在640px像素的手机上显示的高度就应该是(640/750) * 75 = 64px,以此类推,在不同像素手机上元素的大小就是(实际设备大小/设计稿大小)*设计稿上该元素的大小. 而在实际开发中,我们

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度开发

移动端适配方案-rem(基础篇)

常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(百分比适配简单,一般用来做一些适配性不高的页面,比如只有一些文字和图片等简单的屏幕适配) ②:flex (更多的用于复杂页面的布局.具体参照阮一峰大神写的-Flex 布局教程:语法篇和实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool   (语法篇) http://www.ruanyifeng.com/blog/2015

手淘H5移动端适配方案flexible源码分析

移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1.  viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的webview)用来展示我们网页的那部分区域,vie

(html+css)_移动端适配方案一(流式布局)

一.前言 二.主要内容 1.移动端面对的问题:因为手机屏幕和尺寸不一样,当我们用不同手机设备浏览的时候为了提高用户体验必须要做移动端适配 2.解决方案一: 流式布局 + viewport视口进行设置 流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <