rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
创建utils包,将rem.js放入utils包下
/**
* 移动端 rem 布局方案,需配合 sass.scss 方法 px2rem 使用
* @module knife/utils/rem
* @author bigfact
*/
/**
* 布局缩放基数,与 ./sass.scss 文件中 $htmlFontSize 的值一致
*/
const layoutRate = 100
/**
* 根元素 html font-size 设置方法
* @param {Number} baseWidth 参照屏幕宽度
* @param {Number} maxWidth 最大屏幕宽度
* @param {Number} rate 布局缩放基数
* @param {Number} maxRate 最大缩放基数
* @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包下创建rem.scss文件
rem.scss(自适应布局)
/**
* 移动端 rem 布局方案 sass 方法,需配合 index.js 使用
* @module knife/utils/rem/sass_scss
* @author bigfact
* @example @import 'node_modules/knife/utils/rem/sass.scss';
*/
/**
* 默认 html font-size 数值
* @name $htmlFontSize
* @example
* // 在导入 sass 文件前,复写 $htmlFontSize 变量,可更新布局基数
* // 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 单位值转换到 rem 单位值
* @function px2rem
* @param {Number} $px px 单位值
* @returns {String} $px px 单位值在当前布局方案下对应的 rem 单位值
* @example
* // 布局基数为默认 100
* // sass
* .fs16 { font-size: px2rem(16); }
* // css
* .fs16 { font-size: 0.16rem; }
*/
@function px2rem($px) {
@return $px / $htmlFontSize * 1rem;
}
将rem.scss文件引入common.scss这个对外 公共样式文件中
@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 滚动条隐藏 */
::-webkit-scrollbar {
display: none;
}
/* div 滚动 */
.scoller-x {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
/* 兼容iOS滚动不流畅 */
-webkit-overflow-scrolling: touch;
}
/* div 滚动 */
.scoller-y {
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
/* 兼容iOS滚动不流畅 */
-webkit-overflow-scrolling: touch;
}
// ---------- 按钮点击效果 -----------
.btn-active:active {
background-color: #e2e2e2 !important;
}
使用
height:px2rem(200);
网友评论