1.在页面中引入flexible.js

base.js

  1. /**
  2.  * flexible.js 阿里前端自适应解决方案
  3.  */
  4. ;(function(win, lib) {
  5.   var doc = win.document;
  6.   var docEl = doc.documentElement;
  7.   var metaEl = doc.querySelector('meta[name="viewport"]');
  8.   var flexibleEl = doc.querySelector('meta[name="flexible"]');
  9.   var dpr = 0;
  10.   var scale = 0;
  11.   var tid;
  12.   var flexible = lib.flexible || (lib.flexible = {});
  13.  
  14.   if (metaEl) {
  15.     console.warn('将根据已有的meta标签来设置缩放比例');
  16.     var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
  17.     if (match) {
  18.       scale = parseFloat(match[1]);
  19.       dpr = parseInt(1 / scale);
  20.     }
  21.   } else if (flexibleEl) {
  22.     var content = flexibleEl.getAttribute('content');
  23.     if (content) {
  24.       var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  25.       var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  26.       if (initialDpr) {
  27.         dpr = parseFloat(initialDpr[1]);
  28.         scale = parseFloat((1 / dpr).toFixed(2));
  29.       }
  30.       if (maximumDpr) {
  31.         dpr = parseFloat(maximumDpr[1]);
  32.         scale = parseFloat((1 / dpr).toFixed(2));
  33.       }
  34.     }
  35.   }
  36.  
  37.   if (!dpr && !scale) {
  38.     var isAndroid = win.navigator.appVersion.match(/android/gi);
  39.     var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  40.     var devicePixelRatio = win.devicePixelRatio;
  41.     if (isIPhone) {
  42.       docEl.setAttribute('data-os', 'ios');
  43.       // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
  44.       if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  45.         dpr = 3;
  46.       } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
  47.         dpr = 2;
  48.       } else {
  49.         dpr = 1;
  50.       }
  51.     } else {
  52.       // 其他设备下，仍旧使用1倍的方案
  53.       dpr = 1;
  54.     }
  55.     scale = 1 / dpr;
  56.   }
  57.  
  58.   docEl.setAttribute('data-dpr', dpr);
  59.   if (!metaEl) {
  60.     metaEl = doc.createElement('meta');
  61.     metaEl.setAttribute('name', 'viewport');
  62.     metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  63.     if (docEl.firstElementChild) {
  64.       docEl.firstElementChild.appendChild(metaEl);
  65.     } else {
  66.       var wrap = doc.createElement('div');
  67.       wrap.appendChild(metaEl);
  68.       doc.write(wrap.innerHTML);
  69.     }
  70.   }
  71.  
  72.   function refreshRem(){
  73.     var width = docEl.getBoundingClientRect().width;
  74.     if (width / dpr > 540) {
  75.       width = 540 * dpr;
  76.     }
  77.     var rem = width / 10;
  78.     docEl.style.fontSize = rem + 'px';
  79.     flexible.rem = win.rem = rem;
  80.   }
  81.  
  82.   win.addEventListener('resize', function() {
  83.     clearTimeout(tid);
  84.     tid = setTimeout(refreshRem, 300);
  85.   }, false);
  86.   win.addEventListener('pageshow', function(e) {
  87.     if (e.persisted) {
  88.       clearTimeout(tid);
  89.       tid = setTimeout(refreshRem, 300);
  90.     }
  91.   }, false);
  92.  
  93.   if (doc.readyState === 'complete') {
  94.     doc.body.style.fontSize = 14 * dpr + 'px';
  95.   } else {
  96.     doc.addEventListener('DOMContentLoaded', function(e) {
  97.       doc.body.style.fontSize = 14 * dpr + 'px';
  98.     }, false);
  99.   }
  100.  
  101.   refreshRem();
  102.  
  103.   flexible.dpr = win.dpr = dpr;
  104.   flexible.refreshRem = refreshRem;
  105.   flexible.rem2px = function(d) {
  106.     var val = parseFloat(d) * this.rem;
  107.     if (typeof d === 'string' && d.match(/rem$/)) {
  108.       val += 'px';
  109.     }
  110.     return val;
  111.   }
  112.   flexible.px2rem = function(d) {
  113.     var val = parseFloat(d) / this.rem;
  114.     if (typeof d === 'string' && d.match(/px$/)) {
  115.       val += 'rem';
  116.     }
  117.     return val;
  118.   }
  119.  
  120. })(window, window['lib'] || (window['lib'] = {}));

util.js 工具类

  1. /**
  2.  * 获取当前元素所有最终使用的CSS属性值
  3.  */
  4. export function getStyle(el,style){
  5.   return parseInt(window.getComputedStyle(el, false)[style])
  6. }
  7.  
  8. /**
  9.  * 获取 设备像素比
  10.  */
  11. export function getDeviceRatio(){
  12. 	var isAndroid = window.navigator.appVersion.match(/android/gi);
  13.   var isIPhone = window.navigator.appVersion.match(/iphone/gi);
  14.   var devicePixelRatio = window.devicePixelRatio;
  15.   var dpr;
  16.   if (isIPhone) {
  17.     // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
  18.     if (devicePixelRatio >= 3) {
  19.       dpr = 3;
  20.     } else if (devicePixelRatio >= 2){
  21.       dpr = 2;
  22.     } else {
  23.       dpr = 1;
  24.     }
  25.   } else {
  26.     // 其他设备下，仍旧使用1倍的方案
  27.     dpr = 1;
  28.   }
  29.   return dpr
  30. }

　　

2.安装 node-sass

  1. npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

安装 sass-loader

  1. npm install sass-loader --save

3.重置全局样式

_normalize.scss

  1. @charset "utf-8";
  2.  
  3. html{
  4.  
  5.   color: #000;
  6.   background: #fff;
  7.   overflow-y: scroll;
  8.   -webkit-text-size-adjust: 100%;
  9.   -ms-text-size-adjust: 100%;
  10.  
  11. }
  12. html * {
  13.   outline: none;
  14.   -webkit-text-size-adjust: none;
  15.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  16. }
  17. html,
  18. body {
  19.   font-family: sans-serif;
  20.   height: 100%;
  21.   width:100%;
  22.   // overflow:hidden;
  23. }
  24.  
  25. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
  26. th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  27.   margin: 0;
  28.   padding: 0;
  29. }
  30. input,
  31. select,
  32. textarea {
  33.   font-size: 100%;
  34. }
  35.  
  36. table {
  37.   border-collapse: collapse;
  38.   border-spacing: 0;
  39. }
  40.  
  41. fieldset,
  42. img {
  43.   border: 0;
  44. }
  45.  
  46. abbr,
  47. acronym {
  48.   border: 0;
  49.   font-variant: normal;
  50. }
  51.  
  52. del {
  53.   text-decoration: line-through;
  54. }
  55. address,
  56. caption,
  57. cite,
  58. code,
  59. dfn,
  60. em,
  61. th,
  62. i,
  63. var {
  64.   font-style: normal;
  65.   font-weight: 500;
  66. }
  67.  
  68. ol,
  69. ul {
  70.   list-style: none;
  71. }
  72.  
  73. caption,
  74. th {
  75.   text-align: left;
  76. }
  77.  
  78. h1,h2,h3,h4,h5,h6 {
  79.   font-size: 100%;
  80.   font-weight: 500;
  81. }
  82. q:before,
  83. q:after {
  84.   content: '';
  85. }
  86.  
  87. sub,
  88. sup {
  89.   font-size: 75%;
  90.   line-height: 0;
  91.   position: relative;
  92.   vertical-align: baseline;
  93. }
  94. sup {
  95.   top: -0.5em;
  96. }
  97. sub {
  98.   bottom: -0.25em;
  99. }
  100.  
  101. a:hover {
  102.   text-decoration: underline;
  103. }
  104.  
  105. ins,
  106. a,
  107. a:active,
  108. a:visited,
  109. a:link{
  110.   text-decoration: none;
  111. }
  112. .clearfix{
  113.   &:after{
  114.     display: table;
  115.     clear: both;
  116.     content: "";
  117.     visibility: hidden;;
  118.     height: 0;
  119.   }
  120. }
  121. body{
  122.   height:100%;
  123.   font-family: "Microsoft YaHei";
  124. }

等同于 reset.css

  1. /**
  2.  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
  3.  * http://cssreset.com
  4.  */
  5. html, body, div, span, applet, object, iframe,
  6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7. a, abbr, acronym, address, big, cite, code,
  8. del, dfn, em, img, ins, kbd, q, s, samp,
  9. small, strike, strong, sub, sup, tt, var,
  10. b, u, i, center,
  11. dl, dt, dd, ol, ul, li,
  12. fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td,
  14. article, aside, canvas, details, embed,
  15. figure, figcaption, footer, header,
  16. menu, nav, output, ruby, section, summary,
  17. time, mark, audio, video, input {
  18.   margin: 0;
  19.   padding: 0;
  20.   border: 0;
  21.   font-size: 100%;
  22.   font-weight: normal;
  23.   vertical-align: baseline;
  24. }
  25.  
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure,
  28. footer, header, menu, nav, section {
  29.   display: block;
  30. }
  31.  
  32. body {
  33.   line-height: 1;
  34. }
  35.  
  36. blockquote, q {
  37.   quotes: none;
  38. }
  39.  
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.   content: none;
  43. }
  44.  
  45. table {
  46.   border-collapse: collapse;
  47.   border-spacing: 0;
  48. }
  49.  
  50. /* custom */
  51. a {
  52.   color: #7e8c8d;
  53.   text-decoration: none;
  54.   -webkit-backface-visibility: hidden;
  55. }
  56.  
  57. li {
  58.   list-style: none;
  59. }
  60.  
  61. ::-webkit-scrollbar {
  62.   width: 5px;
  63.   height: 5px;
  64. }
  65.  
  66. ::-webkit-scrollbar-track-piece {
  67.   background-color: rgba(0, 0, 0, 0.2);
  68.   -webkit-border-radius: 6px;
  69. }
  70.  
  71. ::-webkit-scrollbar-thumb:vertical {
  72.   height: 5px;
  73.   background-color: rgba(125, 125, 125, 0.7);
  74.   -webkit-border-radius: 6px;
  75. }
  76.  
  77. ::-webkit-scrollbar-thumb:horizontal {
  78.   width: 5px;
  79.   background-color: rgba(125, 125, 125, 0.7);
  80.   -webkit-border-radius: 6px;
  81. }
  82.  
  83. html, body {
  84.   width: 100%;
  85. }
  86.  
  87. body {
  88.   -webkit-text-size-adjust: none;
  89.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  90. }

　　

4.常用 mixin 函数

_mixins.scss

  1. /**
  2.  * 字体
  3.  */
  4. @mixin font-dpr($font-size){
  5.   font-size: $font-size;
  6.   [data-dpr='2'] & {
  7.     font-size: $font-size * 2;
  8.   }
  9.   [data-dpr='3'] & {
  10.     font-size: $font-size * 3;
  11.   }
  12.   //下版注意加上line-hegiht:100%
  13. }
  14.  
  15. /**
  16.  * 行高
  17.  */
  18. @mixin lin-dpr ($height) {
  19.   line-height: $height;
  20.   [data-dpr='2'] & {
  21.     line-height: $height * 2;
  22.   }
  23.   [data-dpr='3'] & {
  24.     line-height: $height * 3;
  25.   }
  26. }
  27.  
  28. /**
  29.  * 高度
  30.  */
  31. @mixin height-dpr($height) {
  32.   height: $height;
  33.   [data-dpr='2'] & {
  34.     height: $height * 2;
  35.   }
  36.   [data-dpr='3'] & {
  37.     height: $height * 3;
  38.   }
  39. }
  40.  
  41. /**
  42.  * 背景图
  43.  */
  44. @mixin img-dpr($url,$name,$type:".png"){
  45.   background-image: url($url+"2x/"+ $name+"@2x"+$type);
  46.   [data-dpr="3"] &{
  47.     background-image: url($url+"3x/"+ $name+"@3x"+$type);
  48.   }
  49. }
  50.  
  51. /**
  52.  * 设置宽、高
  53.  */
  54. @mixin setSize($width,$height){
  55.   width:$width;
  56.   height:$height;
  57. }
  58.  
  59. /**
  60.  * 禁止改变元素的浏览器默认风格
  61.  */
  62. @mixin hideAppearance{
  63.   -webkit-appearance: none;
  64.   -moz-appearance: none;
  65.   appearance:none;
  66. }
  67.  
  68. /**
  69.  * 解决1px问题
  70.  */
  71. @mixin border-1px($color) {
  72.   position: relative;
  73.   &:after {
  74.     display: block;
  75.     position: absolute;
  76.     left: 0;
  77.     bottom: 0;
  78.     width: 100%;
  79.     border-top: 1px solid $color;
  80.     content: ' ';
  81.   }
  82. }
  83.  
  84. /**
  85.  * 判断在不同 dpr 下的显示情况
  86.  */
  87. @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  88.   .border-1px {
  89.     &::after {
  90.       -webkit-transform: scaleY(0.7);
  91.       transform: scaleY(0.7);
  92.     }
  93.   }
  94. }
  95.  
  96. @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  97.   .border-1px {
  98.     &::after {
  99.       -webkit-transform: scaleY(0.5);
  100.       transform: scaleY(0.5);
  101.     }
  102.   }
  103. }

　　

5.px 转 rem 函数

_functions.scss

  1. //将px转换成rem
  2. $defaut-font-size: 64px; // 设计图为 640
  3. @function px2rem($px) {
  4.   @return $px/$defaut-font-size * 1rem;
  5. }

6.引用

为了方便依赖所有的公共样式，创建一个 app.scss ，引入其他的公共scss,当应用到其他 css 时，直接引入app即可（@import "./app"）

app.scss

  1. // 为了方便依赖所有的公共样式，创建一个 app.scss
  2. @import "./functions";
  3. @import "./mixins";

App.vue 中 引入 重置 css样式的 _normalize.scss

  1. <style lang="scss">
  2.   @import './base/css/normalize.scss';
  3.  
  4. </style>

7.常用语法

（1）导入

@import  引入 .scss 文件

例如：

  1. @import '../base/css/base.scss';

（2）变量

普通变量

  1. $fontSize: 12px;
  2. body{
  3.   font-size:$fontSize;
  4. }

默认变量

sass的默认变量仅需要在值后面加上!default即可。

  1. $baseLineHeight:1.5 !default;
  2. body{
  3.   line-height: $baseLineHeight;
  4. }

（3）mixin 混合

@include  引入 mixin

例如：

  1. /**
  2.  * 字体
  3.  */
  4. @mixin font-dpr($font-size){
  5.   font-size: $font-size;
  6.   [data-dpr='2'] & {
  7.     font-size: $font-size * 2;
  8.   }
  9.   [data-dpr='3'] & {
  10.     font-size: $font-size * 3;
  11.   }
  12. }

应用

  1. @include font-dpr(20px); // font-size:20px;

（4）function 函数

例如：

  1. //将px转换成rem
  2. $defaut-font-size: 64px; // 设计图为 640
  3. @function px2rem($px) {
  4.   @return $px/$defaut-font-size * 1rem;
  5. }

引用

  1. margin-top: px2rem(20px);

（5）继承

  1. h1{
  2.   border: 4px solid #ff9aa9;
  3. }
  4. .speaker{
  5.   @extend h1;
  6.   border-width: 2px;
  7. }

（6）判断  @if

sass

  1. $lte7: true;
  2. $type: monster;
  3. .ib{
  4.     display:inline-block;
  5.     @if $lte7 {
  6.         *display:inline;
  7.         *zoom:1;
  8.     }
  9. }
  10. p {
  11.   @if $type == ocean {
  12.     color: blue;
  13.   } @else if $type == matador {
  14.     color: red;
  15.   } @else if $type == monster {
  16.     color: green;
  17.   } @else {
  18.     color: black;
  19.   }
  20. }

css

  1. .ib{
  2.     display:inline-block;
  3.     *display:inline;
  4.     *zoom:1;
  5. }
  6. p {
  7.   color: green;
  8. }

参考：https://www.w3cplus.com/sassguide/syntax.html

.

vue2.0 flexible.js + rem 进行自适应开发的更多相关文章

  1. 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  2. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  3. Vue2.0+Node.js+MongoDB全栈打造商城系统 免费下载

    <ignore_js_op> 课程目录||--第01章 课程介绍|    01-01 课程-导学.mp4|    01-02 前端框架回顾.mp4|    01-03 vue概况以及核心思 ...

  4. vue2.0+node.js+mongodb全栈打造商城

    Github地址:https://github.com/ccyinghua/vue-node-mongodb-project 一.构建项目所用: vue init webpack vue-node-m ...

  5. Vue2.0 vue-source.js jsonp demo vue跨域请求

    以调用百度的输入提示接口为例 ===================================================================================== ...

  6. Vue2.0+Node.js+MongoDB全栈打造商城系统

    vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...

  7. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  8. rem适配布局（rem+less+媒体查询 和 rem+flexible.js）

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  9. 手淘移动适配方案flexible.js兼容bug处理

    什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...

随机推荐

  1. Web - DOM

    1. 简介 DOM(Document Object Mode)是一套web标准,地那一了访问HTML文档的一套属性.方法和事件 其本质: 网页 与 脚本语言 沟通的桥梁 脚本语言通过DOM对象来访问H ...

  2. TOJ3031: Multiple bfs

    3031: Multiple Time Limit(Common/Java):2000MS/6000MS     Memory Limit:65536KByte Total Submit: 60   ...

  3. Pycharm脚本通用部分设置

    Python脚本经常要设置同样的注释内容,Pycharm里面提供的模板可以很好的实现这个需求. 查找: File->settings->Editor->File and Code T ...

  4. 【mysql优化 2】索引条件下推优化

    原文地址:Index Condition Pushdown Optimization 索引条件下推(ICP:index condition pushdown)是mysql中一个常用的优化,尤其是当my ...

  5. 九度oj 题目1466：排列与二进制

    题目描述: 在组合数学中,我们学过排列数.从n个不同元素中取出m(m<=n)个元素的所有排列的个数,叫做从n中取m的排列数,记为p(n, m).具体计算方法为p(n, m)=n(n-1)(n-2 ...

  6. 微软2014实习生及秋令营技术类职位在线测试（题目1 : String reorder）

    题目1 : String reorder 时间限制:10000ms 单点时限:1000ms 内存限制:256MB Description For this question, your program ...

  7. 算法复习——哈希表+折半搜索（poj2549）

    搬讲义~搬讲义~ 折半搜索感觉每次都是打暴力时用的啊2333,主要是用于降次··当复杂度为指数级别时用折半可以减少大量复杂度··其实专门考折半的例题并不多···一般都是中途的一个小优化··· 然后折半 ...

  8. Java防止SQL注入的途径介绍

    为了防止SQL注入,最简洁的办法是杜绝SQL拼接,SQL注入攻击能得逞是因为在原有SQL语句中加入了新的逻辑,如果使用PreparedStatement来代替Statement来执行SQL语句,其后只 ...

  9. python time模块 sys模块 collections模块 random模块 os模块 序列化 datetime模块

    一 collections模块 collections模块在内置的数据类型,比如:int.str.list.dict等基础之上额外提供了几种数据类型. 参考博客 http://www.pythoner ...

  10. vue 配合 element-ui使用搭建环境时候遇到的坑

    在需要使用element-ui的时候,直接引入文件,发现会报错,解析不了css文件和字体,需要在webpack里面配置上css-loader和style-loader,最好的做法是把element-u ...