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 ...