『cute1px』移动端1px解决方案之less版-前端教程-前军教程网

移动端不同分辨率下1px的显示效果大相径庭，至于原因这里不再赘述，这里我写了一个mixin。

Install

‘npm i cute1px’ 建议使用淘宝镜像cnpm替代npm

HTML

HTML部分：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./flexible/index.js"></script>
</head>
<body>
<div><div>
</body>

CSS

less部分：
@import './node_modules/cute1px/dist/cute1px.less';
div{
  .cute-1px(#000000,10);//参数为color，radius
}


边框使用类说明如下:
四边都有.cute-1px(#000000,10);
仅上边框.cute-1px-t(#000000)
仅右边框.cute-1px-r(#000000)
仅下边框.cute-1px-b(#000000)
仅左边框.cute-1px-l(#000000)
仅上下框.cute-1px-tb(#000000)
仅左右框.cute-1px-lf(#000000)

源码(感兴趣的话可以看看)


/**
 * @auth cuteCloud
 * Description 移动端1px，配合flexible布局之less解决方案
 * Mail 348296106@qq.com
 */

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.function {
  .trans(@px) {
    return: @px / @baseFontSize * 1rem;
  }
}
.setLine(@color,@radius) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border: 1px solid @color;
  color: @color;
  height: 200%;
  transform-origin: left top;
  transform: scale(0.5);
  border-radius:trans(@radius);
}

.setTopLine(@color) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid @color;
  color: @color;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.setBottomLine(@color) {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid @color;
  color: @color;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}

.setLeftLine(@color) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid @color;
  color: @color;
  transform-origin: 0 0;
  transform: scaleX(0.5);
}

.setRightLine(@color) {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid @color;
  color: @color;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}

.cute-1px(@radius:0px,@color:#dddddd) {
  position: relative;
  &:before {
    .setLine(@radius,@color);
  }
}

.cute-1px-t(@color:#dddddd) {
  position: relative;
  &:before {
    .setTopLine(@color);
  }
}

.cute-1px-b(@color:#dddddd) {
  position: relative;
  &:after {
    .setBottomLine(@color);
  }
}

.cute-1px-tb(@color:#dddddd) {
  position: relative;
  &:before {
    .setTopLine(@color);
  }
  &:after {
    .setBottomLine(@color);
  }
}

.cute-1px-l(@color:#dddddd) {
  &:before {
    .setLeftLine(@color);
  }
}

.cute-1px-r(@color:#dddddd) {
  position: relative;
  &:after {
    .setRightLine(@color);
  }
}
.cute-1px-lr(@color:#dddddd) {
  position: relative;
  &:before {
    .setLeftLine(@color);
  }
  &:after {
    .setRightLine(@color);
  }
}

为了使用方便，简单的写了一个mixin，需要的朋友拿去用吧

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

『cute1px』移动端1px解决方案之less版

Install

HTML

CSS

源码(感兴趣的话可以看看)