1第一种使用px2rem插件
1. 创建:
在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码;
(function() {
function a() {
var b = document.documentElement.clientWidth
b = b > 750 ? 750 : b
var c = (b / 750) * 100
document.getElementsByTagName('html')[0].style.fontSize = c + 'px'
}
a()
window.onresize = a
})()
在src\main.js中导入之前创建的js文件;
import './config/rem.js'
在项目中找到build\utils.js,定位至function generateLoaders在其上方定义如下:
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 50 /* //设计稿根元素*/
}
}
// 以上的添加的px2rem的定义
// 在下方generateLoaders方法中添加[cssLoader,px2remLoader]
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
1. 使用:
直接设置css样式使用px单位即可,如果不需要自动转换则在其后面加上/*no*/
一,1.流式布局加视口
一,-webkit-box-sizing:border-bor处理防止内容溢出,做兼容处理
点击处理高亮的效果,
-webkit-tap-hightlight-color:transparent
* {
margin: 0;
padding: 0;
}
.html {
/* 移动端ios禁止调整字体 */
text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100%!important;
/* 抗锯齿 */
-webkit-font-smoothing: antialiased;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 低像素文本抗锯齿处理 */
.font_smoothing_n {
-webkit-font-smoothing: none;
}
/* 列表 */
ul,
ol {
list-style: none;
}
/* 链接 */
a {
text-decoration: none;
}
/* 按钮 */
button {
outline: none;
border: none;
border-radius: 0;
}
input {
border: none;
outline: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
textarea {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
/* 图片 */
img {
border: none;
vertical-align: middle;
width: 100%;
}
/* flex布局 */
.flex {
display: flex;
display: -webkit-flex;
}
.flex_warp {
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.flex_x {
flex-flow: column;
-ms-flex-flow: column;
}
.flex_y {
flex-flow: row;
-ms-flex-flow: row;
}
.flex_sa {
justify-content: space-around;
}
.flex_sb {
justify-content: space-between;
}
.flex_fs {
justify-content: flex-start;
}
/* 定位 */
.position_r {
position: relative;
}
.position_a {
position: absolute;
}
.position_f {
position: fixed;
}
.z_idx_s {
z-index: -1;
}
.z_idx_m {
z-index: 10;
}
.z_idx_l {
z-index: 100;
}
/* 盒模型 */
.box_bb {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* 穿透 */
.penetrate {
pointer-events: none;
}
/* 禁止复制 */
.no_copy {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 字体 */
.font_b {
font-weight: bold;
}
.font_n {
font-weight: normal;
}
安装lib-flexible.js
npm install lib-flexible --save
在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible'
在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除
安装px2rem-loader
在实际的开发中,使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ,将px转换成rem,我们将使用px2rem这个工具,
npm install px2rem-loader
配置px2rem-loader
修改build/utils.js, 在cssLoader变量中
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
importLoader: 5 // 在加载cssLoader之前加载的loader个数
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
emUnit: 75 // 设计稿的1/10
}
}
// 在后面的函数中
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
设置完成后重启项目
https://github.com/LinkSun/hotcss
点击延迟问题
// 绑定fastclick 给body绑定 因为元素都在body里面 间接为所有元素都绑定了fastclick
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
后面直接写click就可以了
无标题文档