1像素border 利用伪类和媒体查询:

伪类:

border-1px($color)
position:relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-bottom: 1px solid $color
content: ' '
&:before
display: block
position: absolute
left: 0
top: 0
width: 100%
border-top: 1px solid $color
content: ' '

媒体查询  定义全局样式border-1px

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
&::before
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
&::before
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)

1像素border的更多相关文章

  1. vue2.0:(六)、移动端像素border的实现和整合引入less文件

    知识点一.如何在手机上看我们制作的移动端页面. 正常我们在电脑上都是按如下图来制作手机页面的: 如果要在手机上面看就不能用localhost了.所以,进入命令行,输入ipconfig查看本地ip地址: ...

  2. 使用min-device-pixel-ratio媒体功能实现真正的1像素border

    关于设备像素比的知识,想必做过移动端开发的都有接触,这里就不介绍啦,万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍 由于设备像素比存在的原因,我们在处理设计图的一些边 ...

  3. 实现 1像素border

    border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: ...

  4. 1像素border的实现(vue.js)

  5. border 0px和border none的区别

    border:0px这个表示的是边框为0像素,表示边框的像素 border:none 这个表示无边框(边框的绘制方式),边框的绘制方式有很多种:solid dashed等等

  6. 解决移动端1px的问题,设备像素比devicePixelRatio的应用

    本文主要针对移动端1物理像素问题展开 解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在 设备独 ...

  7. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  8. 常用[js,css,jquery,html]

    目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur   ...

  9. 【移动适配】移动Web怎么做屏幕适配(三)

    复杂纷扰的世界背后,总会有万变不离其宗的简单规则 啃先生 Mar.8th.2016 壹 | Fisrt 前面写了两篇移动适配相关的文章: <移动Web怎么做屏幕适配(一)>重点介绍了怎样利 ...

随机推荐

  1. 6.House Robber(简单版抢银行)

    Level:   Easy 题目描述: You are a professional robber planning to rob houses along a street. Each house ...

  2. 牛客国庆集训day5 G 贵族用户 (模拟)

    链接:https://www.nowcoder.com/acm/contest/205/G来源:牛客网 题目描述 终于活成了自己讨厌的样子. 充钱能让你变得更强. 在暖婊这个游戏里面,如果你充了x元钱 ...

  3. shiro 的简单应用

    shiro   的简单应用 shiro官网:https://shiro.apache.org/ shiro 简介: Apache Shiro(日语"堡垒(Castle)"的意思)是 ...

  4. Pre- and Post-order Traversals(先序+后序序列,建立二叉树)

    PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin_44385565/article/details/89737224 Suppose th ...

  5. 批量mvn 打包 bat文件命令

    @echo off cd /d "E:\project\Branches\Source\" svn up mvn clean install -Dmaven.test.skip=t ...

  6. mysql 常用函数。。

    FIND_IN_SET(str,strlist) ,strlist 是 一个 由 逗号 分割的字符串,要注意 strlist 不能有逗号.. 它 等于  where str in (1,2,3***) ...

  7. window 系统 修改服务器远程登录端口

    window 系统 [ 默认3389远程端口 ] 快捷键:Ctrl+R  然后输入“regedit”,打开注册表 或者 单击左下角[开始]——[运行],然后在输入框输入 regedit,点击确定,打开 ...

  8. 初始 D2 Admin

    1.安装D2 admin 输入:npm install -g @d2-admin/d2-admin-cli 2.创建D2 项目 ,可以选择简洁版或者完整版 输入:d2 create 3.然后 进入创建 ...

  9. java——快排、冒泡、希尔、归并

    直接贴代码 快排: public class Test { private static void sort(int[] nums){ if(nums == null || nums.length = ...

  10. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...