使用flexible.js和第三方依赖包postcss-px2rem,解决pc端响应式和移动端自适应问题
第一步
1.创建vue项目
vue create '项目名称'
2.运行项目
npm run dev
3.配置vue.config.js
4.下载第三方依赖包,进行rem布局
npm install postcss-px2rem -S
在main.js中导入rem的js
import '@/utils/flexible.js'
在vue.config.js中配置
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
require('postcss-px2rem')({
// 适配375屏幕,设计图750中量出来的尺寸要 / 2
// 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
remUnit: 37.5
})
]
}
}
}
vue.config.js
const port = process.env.port
module.exports = {
devServer: {
port: port,
compress: true,
open: true// 运行时自动打开浏览器
},
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
require('postcss-px2rem')({
// 适配375屏幕,设计图750中量出来的尺寸要 / 2
// 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
remUnit: 37.5
})
]
}
}
}
}
utils/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) {
// 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;
/**
* 设置成1200,当屏幕小于1200时,开始改变html的font-size值
**/
if (width / dpr > 1200) {
width = 1200 * dpr;
}
var rem = width / 20;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 30);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 30);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * 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'] = {}));
为了解决屏幕大于1200px时,html的font-size随时计算,导致样式错乱问题,给HTML的font-size设置死值 font-size: 87.9px !important;
media.scss
/**
*超小屏幕 手机 <768px
*小屏幕 平板 >=768px ~ <992px
*中等屏幕 桌面 >=992px ~ <1200px
*大屏幕 桌面 >=1200px
**/
.wd-container {
width: 100%;
max-width: 1200px;
margin: 0px auto;
display: flex;
flex-direction: column;
}
.wd-row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wd-col-24 {
width: calc((100% / 24) * 24);
}
.wd-col-23 {
width: calc((100% / 24) * 23);
}
.wd-col-22 {
width: calc((100% / 24) * 22);
}
.wd-col-21 {
width: calc((100% / 24) * 21);
}
.wd-col-20 {
width: calc((100% / 24) * 20);
}
.wd-col-19 {
width: calc((100% / 24) * 19);
}
.wd-col-18 {
width: calc((100% / 24) * 18);
}
.wd-col-17 {
width: calc((100% / 24) * 17);
}
.wd-col-16 {
width: calc((100% / 24) * 16);
}
.wd-col-15 {
width: calc((100% / 24) * 15);
}
.wd-col-14 {
width: calc((100% / 24) * 14);
}
.wd-col-13 {
width: calc((100% / 24) * 13);
}
.wd-col-12 {
width: calc((100% / 24) * 12);
}
.wd-col-11 {
width: calc((100% / 24) * 11);
}
.wd-col-10 {
width: calc((100% / 24) * 10);
}
.wd-col-9 {
width: calc((100% / 24) * 9);
}
.wd-col-8 {
width: calc((100% / 24) * 8);
}
.wd-col-7 {
width: calc((100% / 24) * 7);
}
.wd-col-6 {
width: calc((100% / 24) * 6);
}
.wd-col-5 {
width: calc((100% / 24) * 5);
}
.wd-col-4 {
width: calc((100% / 24) * 4);
}
.wd-col-3 {
width: calc((100% / 24) * 3);
}
.wd-col-2 {
width: calc((100% / 24) * 2);
}
.wd-col-1 {
width: calc((100% / 24) * 1);
}
.wd-offset-1 {
margin-left: calc((100% / 24) * 1);
}
.wd-offset-2 {
margin-left: calc((100% / 24) * 2);
}
.wd-offset-3 {
margin-left: calc((100% / 24) * 3);
}
.wd-offset-4 {
margin-left: calc((100% / 24) * 4);
}
.wd-offset-5 {
margin-left: calc((100% / 24) * 5);
}
.wd-offset-6 {
margin-left: calc((100% / 24) * 6);
}
.wd-offset-7 {
margin-left: calc((100% / 24) * 7);
}
.wd-offset-8 {
margin-left: calc((100% / 24) * 8);
}
.wd-offset-9 {
margin-left: calc((100% / 24) * 9);
}
.wd-offset-10 {
margin-left: calc((100% / 24) * 10);
}
.wd-offset-11 {
margin-left: calc((100% / 24) * 11);
}
.wd-offset-12 {
margin-left: calc((100% / 24) * 12);
}
.wd-offset-13 {
margin-left: calc((100% / 24) * 13);
}
.wd-offset-14 {
margin-left: calc((100% / 24) * 14);
}
.wd-offset-15 {
margin-left: calc((100% / 24) * 15);
}
.wd-offset-16 {
margin-left: calc((100% / 24) * 16);
}
.wd-offset-17 {
margin-left: calc((100% / 24) * 17);
}
.wd-offset-18 {
margin-left: calc((100% / 24) * 18);
}
.wd-offset-19 {
margin-left: calc((100% / 24) * 19);
}
.wd-offset-20 {
margin-left: calc((100% / 24) * 20);
}
.wd-offset-21 {
margin-left: calc((100% / 24) * 21);
}
.wd-offset-22 {
margin-left: calc((100% / 24) * 22);
}
.wd-offset-23 {
margin-left: calc((100% / 24) * 23);
}
.wd-show {
display: block !important;
}
.wd-hide {
display: none !important;
}
/* 当浏览器的可视区域大于于1200px xl*/
@media screen and (min-width: 1200px) {
html {
font-size: 87.9px !important;
}
.wd-col-xl-24 {
width: calc((100% / 24) * 24);
}
.wd-col-xl-23 {
width: calc((100% / 24) * 23);
}
.wd-col-xl-22 {
width: calc((100% / 24) * 22);
}
.wd-col-xl-21 {
width: calc((100% / 24) * 21);
}
.wd-col-xl-20 {
width: calc((100% / 24) * 20);
}
.wd-col-xl-19 {
width: calc((100% / 24) * 19);
}
.wd-col-xl-18 {
width: calc((100% / 24) * 18);
}
.wd-col-xl-17 {
width: calc((100% / 24) * 17);
}
.wd-col-xl-16 {
width: calc((100% / 24) * 16);
}
.wd-col-xl-15 {
width: calc((100% / 24) * 15);
}
.wd-col-xl-14 {
width: calc((100% / 24) * 14);
}
.wd-col-xl-13 {
width: calc((100% / 24) * 13);
}
.wd-col-xl-12 {
width: calc((100% / 24) * 12);
}
.wd-col-xl-11 {
width: calc((100% / 24) * 11);
}
.wd-col-xl-10 {
width: calc((100% / 24) * 10);
}
.wd-col-xl-9 {
width: calc((100% / 24) * 9);
}
.wd-col-xl-8 {
width: calc((100% / 24) * 8);
}
.wd-col-xl-7 {
width: calc((100% / 24) * 7);
}
.wd-col-xl-6 {
width: calc((100% / 24) * 6);
}
.wd-col-xl-5 {
width: calc((100% / 24) * 5);
}
.wd-col-xl-4 {
width: calc((100% / 24) * 4);
}
.wd-col-xl-3 {
width: calc((100% / 24) * 3);
}
.wd-col-xl-2 {
width: calc((100% / 24) * 2);
}
.wd-col-xl-1 {
width: calc((100% / 24) * 1);
}
.wd-offset-xl-1 {
margin-left: calc((100% / 24) * 1);
}
.wd-offset-xl-2 {
margin-left: calc((100% / 24) * 2);
}
.wd-offset-xl-3 {
margin-left: calc((100% / 24) * 3);
}
.wd-offset-xl-4 {
margin-left: calc((100% / 24) * 4);
}
.wd-offset-xl-5 {
margin-left: calc((100% / 24) * 5);
}
.wd-offset-xl-6 {
margin-left: calc((100% / 24) * 6);
}
.wd-offset-xl-7 {
margin-left: calc((100% / 24) * 7);
}
.wd-offset-xl-8 {
margin-left: calc((100% / 24) * 8);
}
.wd-offset-xl-9 {
margin-left: calc((100% / 24) * 9);
}
.wd-offset-xl-10 {
margin-left: calc((100% / 24) * 10);
}
.wd-offset-xl-11 {
margin-left: calc((100% / 24) * 11);
}
.wd-offset-xl-12 {
margin-left: calc((100% / 24) * 12);
}
.wd-offset-xl-13 {
margin-left: calc((100% / 24) * 13);
}
.wd-offset-xl-14 {
margin-left: calc((100% / 24) * 14);
}
.wd-offset-xl-15 {
margin-left: calc((100% / 24) * 15);
}
.wd-offset-xl-16 {
margin-left: calc((100% / 24) * 16);
}
.wd-offset-xl-17 {
margin-left: calc((100% / 24) * 17);
}
.wd-offset-xl-18 {
margin-left: calc((100% / 24) * 18);
}
.wd-offset-xl-19 {
margin-left: calc((100% / 24) * 19);
}
.wd-offset-xl-20 {
margin-left: calc((100% / 24) * 20);
}
.wd-offset-xl-21 {
margin-left: calc((100% / 24) * 21);
}
.wd-offset-xl-22 {
margin-left: calc((100% / 24) * 22);
}
.wd-offset-xl-23 {
margin-left: calc((100% / 24) * 23);
}
.wd-offset-xl-0 {
margin-left: calc((100% / 24) * 0);
}
.wd-show-xl {
display: block !important;
}
.wd-hide-xl {
display: none !important;
}
}
/* 当浏览器的可视区域小于1200px lg*/
@media screen and (max-width: 1200px) {
.wd-col-lg-24 {
width: calc((100% / 24) * 24);
}
.wd-col-lg-23 {
width: calc((100% / 24) * 23);
}
.wd-col-lg-22 {
width: calc((100% / 24) * 22);
}
.wd-col-lg-21 {
width: calc((100% / 24) * 21);
}
.wd-col-lg-20 {
width: calc((100% / 24) * 20);
}
.wd-col-lg-19 {
width: calc((100% / 24) * 19);
}
.wd-col-lg-18 {
width: calc((100% / 24) * 18);
}
.wd-col-lg-17 {
width: calc((100% / 24) * 17);
}
.wd-col-lg-16 {
width: calc((100% / 24) * 16);
}
.wd-col-lg-15 {
width: calc((100% / 24) * 15);
}
.wd-col-lg-14 {
width: calc((100% / 24) * 14);
}
.wd-col-lg-13 {
width: calc((100% / 24) * 13);
}
.wd-col-lg-12 {
width: calc((100% / 24) * 12);
}
.wd-col-lg-11 {
width: calc((100% / 24) * 11);
}
.wd-col-lg-10 {
width: calc((100% / 24) * 10);
}
.wd-col-lg-9 {
width: calc((100% / 24) * 9);
}
.wd-col-lg-8 {
width: calc((100% / 24) * 8);
}
.wd-col-lg-7 {
width: calc((100% / 24) * 7);
}
.wd-col-lg-6 {
width: calc((100% / 24) * 6);
}
.wd-col-lg-5 {
width: calc((100% / 24) * 5);
}
.wd-col-lg-4 {
width: calc((100% / 24) * 4);
}
.wd-col-lg-3 {
width: calc((100% / 24) * 3);
}
.wd-col-lg-2 {
width: calc((100% / 24) * 2);
}
.wd-col-lg-1 {
width: calc((100% / 24) * 1);
}
.wd-offset-lg-1 {
margin-left: calc((100% / 24) * 1);
}
.wd-offset-lg-2 {
margin-left: calc((100% / 24) * 2);
}
.wd-offset-lg-3 {
margin-left: calc((100% / 24) * 3);
}
.wd-offset-lg-4 {
margin-left: calc((100% / 24) * 4);
}
.wd-offset-lg-5 {
margin-left: calc((100% / 24) * 5);
}
.wd-offset-lg-6 {
margin-left: calc((100% / 24) * 6);
}
.wd-offset-lg-7 {
margin-left: calc((100% / 24) * 7);
}
.wd-offset-lg-8 {
margin-left: calc((100% / 24) * 8);
}
.wd-offset-lg-9 {
margin-left: calc((100% / 24) * 9);
}
.wd-offset-lg-10 {
margin-left: calc((100% / 24) * 10);
}
.wd-offset-lg-11 {
margin-left: calc((100% / 24) * 11);
}
.wd-offset-lg-12 {
margin-left: calc((100% / 24) * 12);
}
.wd-offset-lg-13 {
margin-left: calc((100% / 24) * 13);
}
.wd-offset-lg-14 {
margin-left: calc((100% / 24) * 14);
}
.wd-offset-lg-15 {
margin-left: calc((100% / 24) * 15);
}
.wd-offset-lg-16 {
margin-left: calc((100% / 24) * 16);
}
.wd-offset-lg-17 {
margin-left: calc((100% / 24) * 17);
}
.wd-offset-lg-18 {
margin-left: calc((100% / 24) * 18);
}
.wd-offset-lg-19 {
margin-left: calc((100% / 24) * 19);
}
.wd-offset-lg-20 {
margin-left: calc((100% / 24) * 20);
}
.wd-offset-lg-21 {
margin-left: calc((100% / 24) * 21);
}
.wd-offset-lg-22 {
margin-left: calc((100% / 24) * 22);
}
.wd-offset-lg-23 {
margin-left: calc((100% / 24) * 23);
}
.wd-offset-lg-0 {
margin-left: calc((100% / 24) * 0);
}
.wd-show-lg {
display: block !important;
}
.wd-hide-lg {
display: none !important;
}
}
/* 当浏览器的可视区域小于992px md*/
@media screen and (max-width: 992px) {
.wd-col-md-24 {
width: calc((100% / 24) * 24);
}
.wd-col-md-23 {
width: calc((100% / 24) * 23);
}
.wd-col-md-22 {
width: calc((100% / 24) * 22);
}
.wd-col-md-21 {
width: calc((100% / 24) * 21);
}
.wd-col-md-20 {
width: calc((100% / 24) * 20);
}
.wd-col-md-19 {
width: calc((100% / 24) * 19);
}
.wd-col-md-18 {
width: calc((100% / 24) * 18);
}
.wd-col-md-17 {
width: calc((100% / 24) * 17);
}
.wd-col-md-16 {
width: calc((100% / 24) * 16);
}
.wd-col-md-15 {
width: calc((100% / 24) * 15);
}
.wd-col-md-14 {
width: calc((100% / 24) * 14);
}
.wd-col-md-13 {
width: calc((100% / 24) * 13);
}
.wd-col-md-12 {
width: calc((100% / 24) * 12);
}
.wd-col-md-11 {
width: calc((100% / 24) * 11);
}
.wd-col-md-10 {
width: calc((100% / 24) * 10);
}
.wd-col-md-9 {
width: calc((100% / 24) * 9);
}
.wd-col-md-8 {
width: calc((100% / 24) * 8);
}
.wd-col-md-7 {
width: calc((100% / 24) * 7);
}
.wd-col-md-6 {
width: calc((100% / 24) * 6);
}
.wd-col-md-5 {
width: calc((100% / 24) * 5);
}
.wd-col-md-4 {
width: calc((100% / 24) * 4);
}
.wd-col-md-3 {
width: calc((100% / 24) * 3);
}
.wd-col-md-2 {
width: calc((100% / 24) * 2);
}
.wd-col-md-1 {
width: calc((100% / 24) * 1);
}
.wd-offset-md-1 {
margin-left: calc((100% / 24) * 1);
}
.wd-offset-md-2 {
margin-left: calc((100% / 24) * 2);
}
.wd-offset-md-3 {
margin-left: calc((100% / 24) * 3);
}
.wd-offset-md-4 {
margin-left: calc((100% / 24) * 4);
}
.wd-offset-md-5 {
margin-left: calc((100% / 24) * 5);
}
.wd-offset-md-6 {
margin-left: calc((100% / 24) * 6);
}
.wd-offset-md-7 {
margin-left: calc((100% / 24) * 7);
}
.wd-offset-md-8 {
margin-left: calc((100% / 24) * 8);
}
.wd-offset-md-9 {
margin-left: calc((100% / 24) * 9);
}
.wd-offset-md-10 {
margin-left: calc((100% / 24) * 10);
}
.wd-offset-md-11 {
margin-left: calc((100% / 24) * 11);
}
.wd-offset-md-12 {
margin-left: calc((100% / 24) * 12);
}
.wd-offset-md-13 {
margin-left: calc((100% / 24) * 13);
}
.wd-offset-md-14 {
margin-left: calc((100% / 24) * 14);
}
.wd-offset-md-15 {
margin-left: calc((100% / 24) * 15);
}
.wd-offset-md-16 {
margin-left: calc((100% / 24) * 16);
}
.wd-offset-md-17 {
margin-left: calc((100% / 24) * 17);
}
.wd-offset-md-18 {
margin-left: calc((100% / 24) * 18);
}
.wd-offset-md-19 {
margin-left: calc((100% / 24) * 19);
}
.wd-offset-md-20 {
margin-left: calc((100% / 24) * 20);
}
.wd-offset-md-21 {
margin-left: calc((100% / 24) * 21);
}
.wd-offset-md-22 {
margin-left: calc((100% / 24) * 22);
}
.wd-offset-md-23 {
margin-left: calc((100% / 24) * 23);
}
.wd-offset-md-0 {
margin-left: calc((100% / 24) * 0);
}
.wd-show-md {
display: block !important;
}
.wd-hide-md {
display: none !important;
}
}
/* 当浏览器的可视区域小于768px sm*/
@media screen and (max-width: 768px) {
.wd-col-sm-24 {
width: calc((100% / 24) * 24);
}
.wd-col-sm-23 {
width: calc((100% / 24) * 23);
}
.wd-col-sm-22 {
width: calc((100% / 24) * 22);
}
.wd-col-sm-21 {
width: calc((100% / 24) * 21);
}
.wd-col-sm-20 {
width: calc((100% / 24) * 20);
}
.wd-col-sm-19 {
width: calc((100% / 24) * 19);
}
.wd-col-sm-18 {
width: calc((100% / 24) * 18);
}
.wd-col-sm-17 {
width: calc((100% / 24) * 17);
}
.wd-col-sm-16 {
width: calc((100% / 24) * 16);
}
.wd-col-sm-15 {
width: calc((100% / 24) * 15);
}
.wd-col-sm-14 {
width: calc((100% / 24) * 14);
}
.wd-col-sm-13 {
width: calc((100% / 24) * 13);
}
.wd-col-sm-12 {
width: calc((100% / 24) * 12);
}
.wd-col-sm-11 {
width: calc((100% / 24) * 11);
}
.wd-col-sm-10 {
width: calc((100% / 24) * 10);
}
.wd-col-sm-9 {
width: calc((100% / 24) * 9);
}
.wd-col-sm-8 {
width: calc((100% / 24) * 8);
}
.wd-col-sm-7 {
width: calc((100% / 24) * 7);
}
.wd-col-sm-6 {
width: calc((100% / 24) * 6);
}
.wd-col-sm-5 {
width: calc((100% / 24) * 5);
}
.wd-col-sm-4 {
width: calc((100% / 24) * 4);
}
.wd-col-sm-3 {
width: calc((100% / 24) * 3);
}
.wd-col-sm-2 {
width: calc((100% / 24) * 2);
}
.wd-col-sm-1 {
width: calc((100% / 24) * 1);
}
.wd-offset-sm-1 {
margin-left: calc((100% / 24) * 1);
}
.wd-offset-sm-2 {
margin-left: calc((100% / 24) * 2);
}
.wd-offset-sm-3 {
margin-left: calc((100% / 24) * 3);
}
.wd-offset-sm-4 {
margin-left: calc((100% / 24) * 4);
}
.wd-offset-sm-5 {
margin-left: calc((100% / 24) * 5);
}
.wd-offset-sm-6 {
margin-left: calc((100% / 24) * 6);
}
.wd-offset-sm-7 {
margin-left: calc((100% / 24) * 7);
}
.wd-offset-sm-8 {
margin-left: calc((100% / 24) * 8);
}
.wd-offset-sm-9 {
margin-left: calc((100% / 24) * 9);
}
.wd-offset-sm-10 {
margin-left: calc((100% / 24) * 10);
}
.wd-offset-sm-11 {
margin-left: calc((100% / 24) * 11);
}
.wd-offset-sm-12 {
margin-left: calc((100% / 24) * 12);
}
.wd-offset-sm-13 {
margin-left: calc((100% / 24) * 13);
}
.wd-offset-sm-14 {
margin-left: calc((100% / 24) * 14);
}
.wd-offset-sm-15 {
margin-left: calc((100% / 24) * 15);
}
.wd-offset-sm-16 {
margin-left: calc((100% / 24) * 16);
}
.wd-offset-sm-17 {
margin-left: calc((100% / 24) * 17);
}
.wd-offset-sm-18 {
margin-left: calc((100% / 24) * 18);
}
.wd-offset-sm-19 {
margin-left: calc((100% / 24) * 19);
}
.wd-offset-sm-20 {
margin-left: calc((100% / 24) * 20);
}
.wd-offset-sm-21 {
margin-left: calc((100% / 24) * 21);
}
.wd-offset-sm-22 {
margin-left: calc((100% / 24) * 22);
}
.wd-offset-sm-23 {
margin-left: calc((100% / 24) * 23);
}
.wd-offset-sm-0 {
margin-left: calc((100% / 24) * 0);
}
.wd-show-sm {
display: block !important;
}
.wd-hide-sm {
display: none !important;
}
}