vue中的适配:px2rem

时间: 2018-11-19阅读: 1923标签: 移动端

这应该是vue项目在适配移动端时候,最简单的方法之一。下面是基本步骤(使用cnpm


1.下载并引入lib-flexible

cnpm install --save lib-flexible

在main.js中 :import 'lib-flexible/flexible'


2.引入px2rem-loader

cnpm install --save px2rem-loader


3.将px2rem-loader添加到cssLoaders

在build/util.js中
添加如下配置


代码如下:

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75//这个是重点,设计稿是750px
    }
  }
const loaders = [cssLoader,px2remLoader]


完了就可以直接用px做单位按照750的设计稿撸代码了。

来源:https://segmentfault.com/a/1190000017059317


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1370

关闭

移动端事件穿透的原理与解决方案

解决事件穿透还有通过设置动画过渡延迟元素消失等方法,由于这类方法影响用户体验,不一一介绍。在实际项目开发中,纯移动端项目优先推荐禁用 click 事件的方法,多端项目优先推荐禁用 touch 事件的方法

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

移动端重置样式 特殊处理

禁止用户选中文字,安卓无效 ­webkit­user­select: none;禁止长按弹出系统菜单。 ­webkit­touch­callout: none;

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

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

移动端点击事件延迟的诞生消亡史

快速反馈对于任何 UI 的实现都是至关重要的。研究表明,100ms 是界面让用户感到即时的最大延迟。尽管如此,移动网络仍然受到一个巨大的反馈问题的困扰

rem.js的用法及在浏览器端的适配

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的

移动端实现表头固定,tbody滚动的三种方法

实现表头固定,tbody垂直滚动。准备工作:获取页面可是区域高度。方法一:两个table,第一个table放表头,第二个table方内容,通过JS实现监听滚动事件,动态控制表头位置

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同

整理经常在H5移动端开发遇到的知识

viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈),本篇文章主要是讲一些其他的或者优化手段。内容不多

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!