移动端1px 边框
伪类+ transform
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}
设备像素比device pixel ratio简称dpr,即物理像素和设备独立像素的比值。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
移动端1px 边框的更多相关文章
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- 移动端1px边框伪类宽高计算
移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...
- 目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...
- 移动端1px边框实现
问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...
- 移动端1px边框问题
用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...
- 解决CSS移动端1px边框问题
移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...
- 移动端1px边框解决方案
在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...
- 解决移动端1px边框问题的几种方法
1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...
- 移动端1px 边框完整方案(四个方向)
使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l 左右方向 t ...
- 关于移动端1px边框问题
<div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...
随机推荐
- 使用curl出现,curl: /usr/local/lib/libssl.so.1.1: version `OPENSSL_1_1_1' not found (required by /usr/lib/x86_64-linux-gnu/libcurl.so.4)
主要原因是curl找不到openssl的路径,所以只要将openssl的路径添加到相应的变量中就可以了. 参考连接https://blog.csdn.net/RookieWutongshu/artic ...
- es实战一:基本概念
基本概念 可以对照数关系型据库来理解Elasticsearch的有关概念. Relational DB Elasticsearch Databases Indices Tables Types Row ...
- vue多套样式切换
最近根据设计要求app需要根据不同环境切换不同样式,网上找了很多方法都不理想,后面自己脑洞大开这么完成的,请大佬多指教! 一.新建全局变量js文件和公用样式文件,在main.js中引入 import ...
- CodeForces 1197 D Yet Another Subarray Problem
题面 不得不说CF还是很擅长出这种让人第一眼看摸不着头脑然后再想想就发现是个SB题的题的hhh(请自行断句). 设sum[]为前缀和数组,那么区间 [l,r]的价值为 sum[r] - sum[l-1 ...
- 「Luogu P5602」小E与美食
题目链接 戳我 \(Solution\) 这道题只需要枚举吃\(k\)个美食,最后在取前\(k\)大的美味值.对于每个算出答案后取\(max\) \(Code\) #include<bits/s ...
- Bzoj3073Journeys
这不裸的dij吗?来,弄他. 打完以后发现不妙,这数据范围略神奇……算一算,考一场都可能跑不出来.map去重边(成功额外引入log)不怕,交.TLE,54. 这不玩呢吗,把map去了,交.MLE,71 ...
- 教程:myeclipse在线安装svn插件
SVN 版本控制,相信开发过程中都很多有用到,今天在myeclipse 在线安装了SVN插件.下面是具体步骤,记录下,希望对有需要的朋友提供帮助. 要求: Myeclispe,电脑能连接互联网 步骤: ...
- ARTS打卡计划第五周
Algorithms: https://leetcode-cn.com/problems/longest-substring-without-repeating-characters/ 采用了map的 ...
- 阿里云服务器yum源更新问题
阿里云官网也给出了yum卸载重装以及修改源为阿里云内网的文档.步骤这里就不说了,可点击下面的链接进行参考 https://help.aliyun.com/knowledge_detail/670864 ...
- Java - 单链表
链表是一种常见的基础数据结构,是一种有序的列表,但不会按照线性顺序存储数据,而是在每一个节点里存储下一个节点的指针(next).链表适合插入.删除,不宜过长,否则会导致遍历性能下降. 以节点方式存储: ...