vue2.0 flexible.js + rem 进行自适应开发
1.在页面中引入flexible.js
base.js
- /**
- * flexible.js 阿里前端自适应解决方案
- */
- ;(function(win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- var metaEl = doc.querySelector('meta[name="viewport"]');
- var flexibleEl = doc.querySelector('meta[name="flexible"]');
- var dpr = 0;
- var scale = 0;
- var tid;
- var flexible = lib.flexible || (lib.flexible = {});
- if (metaEl) {
- console.warn('将根据已有的meta标签来设置缩放比例');
- var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
- if (match) {
- scale = parseFloat(match[1]);
- dpr = parseInt(1 / scale);
- }
- } else if (flexibleEl) {
- var content = flexibleEl.getAttribute('content');
- if (content) {
- var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
- var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
- if (initialDpr) {
- dpr = parseFloat(initialDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- if (maximumDpr) {
- dpr = parseFloat(maximumDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- }
- }
- if (!dpr && !scale) {
- var isAndroid = win.navigator.appVersion.match(/android/gi);
- var isIPhone = win.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = win.devicePixelRatio;
- if (isIPhone) {
- docEl.setAttribute('data-os', 'ios');
- // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
- if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
- dpr = 3;
- } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下,仍旧使用1倍的方案
- dpr = 1;
- }
- scale = 1 / dpr;
- }
- docEl.setAttribute('data-dpr', dpr);
- if (!metaEl) {
- metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- } else {
- var wrap = doc.createElement('div');
- wrap.appendChild(metaEl);
- doc.write(wrap.innerHTML);
- }
- }
- function refreshRem(){
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr > 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem + 'px';
- flexible.rem = win.rem = rem;
- }
- win.addEventListener('resize', function() {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }, false);
- win.addEventListener('pageshow', function(e) {
- if (e.persisted) {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }
- }, false);
- if (doc.readyState === 'complete') {
- doc.body.style.fontSize = 14 * dpr + 'px';
- } else {
- doc.addEventListener('DOMContentLoaded', function(e) {
- doc.body.style.fontSize = 14 * dpr + 'px';
- }, false);
- }
- refreshRem();
- flexible.dpr = win.dpr = dpr;
- flexible.refreshRem = refreshRem;
- flexible.rem2px = function(d) {
- var val = parseFloat(d) * this.rem;
- if (typeof d === 'string' && d.match(/rem$/)) {
- val += 'px';
- }
- return val;
- }
- flexible.px2rem = function(d) {
- var val = parseFloat(d) / this.rem;
- if (typeof d === 'string' && d.match(/px$/)) {
- val += 'rem';
- }
- return val;
- }
- })(window, window['lib'] || (window['lib'] = {}));
util.js 工具类
- /**
- * 获取当前元素所有最终使用的CSS属性值
- */
- export function getStyle(el,style){
- return parseInt(window.getComputedStyle(el, false)[style])
- }
- /**
- * 获取 设备像素比
- */
- export function getDeviceRatio(){
- var isAndroid = window.navigator.appVersion.match(/android/gi);
- var isIPhone = window.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = window.devicePixelRatio;
- var dpr;
- if (isIPhone) {
- // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
- if (devicePixelRatio >= 3) {
- dpr = 3;
- } else if (devicePixelRatio >= 2){
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下,仍旧使用1倍的方案
- dpr = 1;
- }
- return dpr
- }
2.安装 node-sass
- 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
- npm install sass-loader --save
3.重置全局样式
_normalize.scss
- @charset "utf-8";
- html{
- color: #000;
- background: #fff;
- overflow-y: scroll;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- }
- html * {
- outline: none;
- -webkit-text-size-adjust: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- html,
- body {
- font-family: sans-serif;
- height: 100%;
- width:100%;
- // overflow:hidden;
- }
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
- th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
- margin: 0;
- padding: 0;
- }
- input,
- select,
- textarea {
- font-size: 100%;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- fieldset,
- img {
- border: 0;
- }
- abbr,
- acronym {
- border: 0;
- font-variant: normal;
- }
- del {
- text-decoration: line-through;
- }
- address,
- caption,
- cite,
- code,
- dfn,
- em,
- th,
- i,
- var {
- font-style: normal;
- font-weight: 500;
- }
- ol,
- ul {
- list-style: none;
- }
- caption,
- th {
- text-align: left;
- }
- h1,h2,h3,h4,h5,h6 {
- font-size: 100%;
- font-weight: 500;
- }
- q:before,
- q:after {
- content: '';
- }
- sub,
- sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
- sup {
- top: -0.5em;
- }
- sub {
- bottom: -0.25em;
- }
- a:hover {
- text-decoration: underline;
- }
- ins,
- a,
- a:active,
- a:visited,
- a:link{
- text-decoration: none;
- }
- .clearfix{
- &:after{
- display: table;
- clear: both;
- content: "";
- visibility: hidden;;
- height: 0;
- }
- }
- body{
- height:100%;
- font-family: "Microsoft YaHei";
- }
等同于 reset.css
- /**
- * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
- * http://cssreset.com
- */
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video, input {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font-weight: normal;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /* custom */
- a {
- color: #7e8c8d;
- text-decoration: none;
- -webkit-backface-visibility: hidden;
- }
- li {
- list-style: none;
- }
- ::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
- ::-webkit-scrollbar-track-piece {
- background-color: rgba(0, 0, 0, 0.2);
- -webkit-border-radius: 6px;
- }
- ::-webkit-scrollbar-thumb:vertical {
- height: 5px;
- background-color: rgba(125, 125, 125, 0.7);
- -webkit-border-radius: 6px;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- width: 5px;
- background-color: rgba(125, 125, 125, 0.7);
- -webkit-border-radius: 6px;
- }
- html, body {
- width: 100%;
- }
- body {
- -webkit-text-size-adjust: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
4.常用 mixin 函数
_mixins.scss
- /**
- * 字体
- */
- @mixin font-dpr($font-size){
- font-size: $font-size;
- [data-dpr='2'] & {
- font-size: $font-size * 2;
- }
- [data-dpr='3'] & {
- font-size: $font-size * 3;
- }
- //下版注意加上line-hegiht:100%
- }
- /**
- * 行高
- */
- @mixin lin-dpr ($height) {
- line-height: $height;
- [data-dpr='2'] & {
- line-height: $height * 2;
- }
- [data-dpr='3'] & {
- line-height: $height * 3;
- }
- }
- /**
- * 高度
- */
- @mixin height-dpr($height) {
- height: $height;
- [data-dpr='2'] & {
- height: $height * 2;
- }
- [data-dpr='3'] & {
- height: $height * 3;
- }
- }
- /**
- * 背景图
- */
- @mixin img-dpr($url,$name,$type:".png"){
- background-image: url($url+"2x/"+ $name+"@2x"+$type);
- [data-dpr="3"] &{
- background-image: url($url+"3x/"+ $name+"@3x"+$type);
- }
- }
- /**
- * 设置宽、高
- */
- @mixin setSize($width,$height){
- width:$width;
- height:$height;
- }
- /**
- * 禁止改变元素的浏览器默认风格
- */
- @mixin hideAppearance{
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance:none;
- }
- /**
- * 解决1px问题
- */
- @mixin border-1px($color) {
- position: relative;
- &:after {
- display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- border-top: 1px solid $color;
- content: ' ';
- }
- }
- /**
- * 判断在不同 dpr 下的显示情况
- */
- @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
- .border-1px {
- &::after {
- -webkit-transform: scaleY(0.7);
- transform: scaleY(0.7);
- }
- }
- }
- @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
- .border-1px {
- &::after {
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- }
- }
- }
5.px 转 rem 函数
_functions.scss
- //将px转换成rem
- $defaut-font-size: 64px; // 设计图为 640
- @function px2rem($px) {
- @return $px/$defaut-font-size * 1rem;
- }
6.引用
为了方便依赖所有的公共样式,创建一个 app.scss ,引入其他的公共scss,当应用到其他 css 时,直接引入app即可(@import "./app")
app.scss
- // 为了方便依赖所有的公共样式,创建一个 app.scss
- @import "./functions";
- @import "./mixins";
App.vue 中 引入 重置 css样式的 _normalize.scss
- <style lang="scss">
- @import './base/css/normalize.scss';
- </style>
7.常用语法
(1)导入
@import 引入 .scss 文件
例如:
- @import '../base/css/base.scss';
(2)变量
普通变量
- $fontSize: 12px;
- body{
- font-size:$fontSize;
- }
默认变量
sass的默认变量仅需要在值后面加上!default
即可。
- $baseLineHeight:1.5 !default;
- body{
- line-height: $baseLineHeight;
- }
(3)mixin 混合
@include 引入 mixin
例如:
- /**
- * 字体
- */
- @mixin font-dpr($font-size){
- font-size: $font-size;
- [data-dpr='2'] & {
- font-size: $font-size * 2;
- }
- [data-dpr='3'] & {
- font-size: $font-size * 3;
- }
- }
应用
- @include font-dpr(20px); // font-size:20px;
(4)function 函数
例如:
- //将px转换成rem
- $defaut-font-size: 64px; // 设计图为 640
- @function px2rem($px) {
- @return $px/$defaut-font-size * 1rem;
- }
引用
- margin-top: px2rem(20px);
(5)继承
- h1{
- border: 4px solid #ff9aa9;
- }
- .speaker{
- @extend h1;
- border-width: 2px;
- }
(6)判断 @if
sass
- $lte7: true;
- $type: monster;
- .ib{
- display:inline-block;
- @if $lte7 {
- *display:inline;
- *zoom:1;
- }
- }
- p {
- @if $type == ocean {
- color: blue;
- } @else if $type == matador {
- color: red;
- } @else if $type == monster {
- color: green;
- } @else {
- color: black;
- }
- }
css
- .ib{
- display:inline-block;
- *display:inline;
- *zoom:1;
- }
- p {
- color: green;
- }
参考:https://www.w3cplus.com/sassguide/syntax.html
.
vue2.0 flexible.js + rem 进行自适应开发的更多相关文章
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
- Vue2.0+Node.js+MongoDB全栈打造商城系统 免费下载
<ignore_js_op> 课程目录||--第01章 课程介绍| 01-01 课程-导学.mp4| 01-02 前端框架回顾.mp4| 01-03 vue概况以及核心思 ...
- vue2.0+node.js+mongodb全栈打造商城
Github地址:https://github.com/ccyinghua/vue-node-mongodb-project 一.构建项目所用: vue init webpack vue-node-m ...
- Vue2.0 vue-source.js jsonp demo vue跨域请求
以调用百度的输入提示接口为例 ===================================================================================== ...
- Vue2.0+Node.js+MongoDB全栈打造商城系统
vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...
- vue2.0与实战开发
慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- 手淘移动适配方案flexible.js兼容bug处理
什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...
随机推荐
- Web - DOM
1. 简介 DOM(Document Object Mode)是一套web标准,地那一了访问HTML文档的一套属性.方法和事件 其本质: 网页 与 脚本语言 沟通的桥梁 脚本语言通过DOM对象来访问H ...
- TOJ3031: Multiple bfs
3031: Multiple Time Limit(Common/Java):2000MS/6000MS Memory Limit:65536KByte Total Submit: 60 ...
- Pycharm脚本通用部分设置
Python脚本经常要设置同样的注释内容,Pycharm里面提供的模板可以很好的实现这个需求. 查找: File->settings->Editor->File and Code T ...
- 【mysql优化 2】索引条件下推优化
原文地址:Index Condition Pushdown Optimization 索引条件下推(ICP:index condition pushdown)是mysql中一个常用的优化,尤其是当my ...
- 九度oj 题目1466:排列与二进制
题目描述: 在组合数学中,我们学过排列数.从n个不同元素中取出m(m<=n)个元素的所有排列的个数,叫做从n中取m的排列数,记为p(n, m).具体计算方法为p(n, m)=n(n-1)(n-2 ...
- 微软2014实习生及秋令营技术类职位在线测试(题目1 : String reorder)
题目1 : String reorder 时间限制:10000ms 单点时限:1000ms 内存限制:256MB Description For this question, your program ...
- 算法复习——哈希表+折半搜索(poj2549)
搬讲义~搬讲义~ 折半搜索感觉每次都是打暴力时用的啊2333,主要是用于降次··当复杂度为指数级别时用折半可以减少大量复杂度··其实专门考折半的例题并不多···一般都是中途的一个小优化··· 然后折半 ...
- Java防止SQL注入的途径介绍
为了防止SQL注入,最简洁的办法是杜绝SQL拼接,SQL注入攻击能得逞是因为在原有SQL语句中加入了新的逻辑,如果使用PreparedStatement来代替Statement来执行SQL语句,其后只 ...
- python time模块 sys模块 collections模块 random模块 os模块 序列化 datetime模块
一 collections模块 collections模块在内置的数据类型,比如:int.str.list.dict等基础之上额外提供了几种数据类型. 参考博客 http://www.pythoner ...
- vue 配合 element-ui使用搭建环境时候遇到的坑
在需要使用element-ui的时候,直接引入文件,发现会报错,解析不了css文件和字体,需要在webpack里面配置上css-loader和style-loader,最好的做法是把element-u ...