rem是什么?
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位凯沪。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位画髓∥咂看到rem大家一定會(huì)想起em單位瘾带，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似侧但，只不過(guò)一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。
創(chuàng)建utils包航罗，將rem.js放入utils包下
/**
* 移動(dòng)端 rem 布局方案禀横，需配合 sass.scss 方法 px2rem 使用
* @module knife/utils/rem
* @author bigfact
*/
/**
* 布局縮放基數(shù)，與 ./sass.scss 文件中 $htmlFontSize 的值一致
*/
const layoutRate = 100
/**
* 根元素 html font-size 設(shè)置方法
* @param {Number} baseWidth 參照屏幕寬度
* @param {Number} maxWidth 最大屏幕寬度
* @param {Number} rate 布局縮放基數(shù)
* @param {Number} maxRate 最大縮放基數(shù)
* @example
* // sass
* 占位 @import 'node_modules/knife/utils/rem/sass.scss';
* body { font-size: px2rem(14); }
* // css
* body { font-size: 0.14rem; }
* // js
*/
export default function(baseWidth = 320, maxWidth = 768, rate = layoutRate, maxRate = layoutRate) {
function setHtmlFontSize() {
let screenWidth = window.innerWidth
let fontSize = screenWidth < maxWidth ? screenWidth / baseWidth * rate : maxWidth / baseWidth * rate
// 限制最大為 iphone 6s 屏幕效果
fontSize > maxRate && (fontSize = maxRate)
document.documentElement.style.fontSize = fontSize + 'px'
document.documentElement.style.height = '100%'
}
setHtmlFontSize()
window.onload = setHtmlFontSize
window.onresize = setHtmlFontSize
}
將ajax.js 文件引入main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import px2rem from './utils/rem'
px2rem()
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
在styles包下創(chuàng)建rem.scss文件
rem.scss(自適應(yīng)布局)
/**
* 移動(dòng)端 rem 布局方案 sass 方法粥血，需配合 index.js 使用
* @module knife/utils/rem/sass_scss
* @author bigfact
* @example @import 'node_modules/knife/utils/rem/sass.scss';
*/
/**
* 默認(rèn) html font-size 數(shù)值
* @name $htmlFontSize
* @example
* // 在導(dǎo)入 sass 文件前柏锄，復(fù)寫(xiě) $htmlFontSize 變量，可更新布局基數(shù)
* // sass
* $htmlFontSize: 1000;
* 占位 @import 'node_modules/knife/utils/rem/sass.scss';
* html { font-size: $htmlFontSize() * 1px; }
* body { font-size: px2rem(14); }
* // css
* html { font-size: 1000px; }
* body { font-size: 0.014rem; }
*/
$htmlFontSize: 100 !default;
/**
* px 單位值轉(zhuǎn)換到 rem 單位值
* @function px2rem
* @param {Number} $px px 單位值
* @returns {String} $px px 單位值在當(dāng)前布局方案下對(duì)應(yīng)的 rem 單位值
* @example
* // 布局基數(shù)為默認(rèn) 100
* // sass
* .fs16 { font-size: px2rem(16); }
* // css
* .fs16 { font-size: 0.16rem; }
*/
@function px2rem($px) {
@return $px / $htmlFontSize * 1rem;
}
將rem.scss文件引入common.scss這個(gè)對(duì)外 公共樣式文件中
@import '@/styles/rem.scss';
@import '@/styles/iconfont.scss';
/* 可選顏色 */
$grey-88: #888888;
$line: #e5e5e5;
/* 字體 */
.font-kaiti {
font-family: Kaiti SC;
}
/* 單行省略： 需要加寬度width */
.single-dot {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 斷行 */
.line-break {
word-break: normal;
white-space: pre-line;
}
.line-two {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* div 滾動(dòng)條隱藏 */
::-webkit-scrollbar {
display: none;
}
/* div 滾動(dòng) */
.scoller-x {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
/* 兼容iOS滾動(dòng)不流暢 */
-webkit-overflow-scrolling: touch;
}
/* div 滾動(dòng) */
.scoller-y {
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
/* 兼容iOS滾動(dòng)不流暢 */
-webkit-overflow-scrolling: touch;
}
// ---------- 按鈕點(diǎn)擊效果 -----------
.btn-active:active {
background-color: #e2e2e2 !important;
}
使用
height：px2rem(200)复亏；
